/* Ajustes para celular. Se carga después de admin.css, así que sus reglas sí ganan. */
@media (max-width: 760px) {
    /* Encabezado */
    .barra {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 16px;
    }

    .marca { align-self: flex-start; }

    .logo-barra { height: 44px; }

    .menu {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
        width: 100%;
    }

    .menu a {
        padding: 6px 12px;
        border: 1.5px solid rgba(255, 255, 255, 0.6);
        border-radius: 999px;
        font-size: 0.85rem;
        white-space: nowrap;
        opacity: 1;
    }

    .menu a:hover {
        background: rgba(255, 255, 255, 0.15);
        text-decoration: none;
    }

    .usuario {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 8px;
        font-size: 0.85rem;
    }

    .usuario > a {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* Contenido */
    .contenido {
        padding: 16px;
        gap: 16px;
    }

    .panel { padding: 18px; }

    .encabezado-panel {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .busqueda {
        flex-direction: column;
        align-items: stretch;
    }

    .busqueda input[type="search"] { min-width: 0; }

    .stat { padding: 16px; }

    .stat-num { font-size: 1.6rem; }

    .bienvenida h1 { font-size: 1.35rem; }

    .campos { grid-template-columns: 1fr; }

    .resumen-cita { grid-template-columns: 1fr 1fr; }

    .acciones {
        flex-wrap: wrap;
        justify-content: stretch;
    }

    .acciones .btn,
    .acciones .btn-secundario {
        flex: 1 1 140px;
        text-align: center;
    }

    /* Ficha de la clienta */
    .ficha-grid { grid-template-columns: 1fr; }

    .ficha-acciones .btn,
    .ficha-acciones .btn-secundario {
        flex: 1 1 130px;
        text-align: center;
    }

    /* Calendario del dashboard */
    .cal-acciones {
        justify-content: space-between;
        width: 100%;
    }

    .cal-grid { gap: 4px; }

    .dia {
        min-height: 64px;
        padding: 6px;
        font-size: 0.7rem;
    }

    .dia-servicios { display: none; }

    /* Agenda */
    .agenda-nav { gap: 8px; }

    .linea-tiempo { grid-template-columns: 48px 1fr; }

    .columna-horas .hora { font-size: 0.7rem; }

    .cita-linea { font-size: 0.78rem; }

    .cita-detalle { display: none; }

    .cita {
        padding-right: 8px;
    }

    .acciones-cita {
        top: 2px;
        right: 2px;
        gap: 3px;
    }

    /* Al deslizar, las acciones pasan a una franja horizontal en la parte baja de la cita y se acomodan
       en varias filas si el ancho de la cita no alcanza (citas en columnas estrechas) */
    .cita.mostrar-acciones .acciones-cita {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        justify-content: center;
        flex-wrap: wrap;
        padding: 3px 4px;
        border-radius: 0 0 10px 10px;
        background: rgba(29, 29, 31, 0.6);
    }

    .cita.mostrar-acciones .acciones-extra {
        flex-wrap: wrap;
        justify-content: center;
    }

    .acciones-cita .btn-foto svg {
        width: 15px;
        height: 15px;
    }

    .acciones-cita button {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }

    /* Las canceladas no tienen botones: usan todo su espacio (es una franja angosta) */
    .cita.cancelada {
        padding: 3px 6px;
    }

    .cita.cancelada .cita-linea {
        font-size: 0.7rem;
    }

    /* Botones de acción dentro de cada cita, con área suficiente para el dedo */
    .btn-mover,
    .btn-reagendar {
        top: 2px;
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .btn-mover { right: 2px; }

    .btn-reagendar { right: 42px; }

    .cita-flotante {
        width: 180px;
        right: 12px;
    }

    .calendario-flotante { padding: 14px; }

    .cal-flotante-cabecera button {
        width: 44px;
        height: 44px;
    }
}