/* ============================================================
   CENTRO ALOE — Sistema de diseño (rediseño tablet-first v2)
   Especificación: Centro_Aloe_Rediseno_Tablet_First_v2.docx (26/08/2026)

   Este fichero define tokens y componentes reutilizables. La idea del
   rediseño es construir por COMPONENTES, no pantalla a pantalla: las
   plantillas que extienden base.html heredan el shell y los tokens sin
   tener que tocarlas una a una.

   Regla que manda sobre cualquier criterio estético (§9 del documento):
   ningún elemento interactivo baja de 48x48 px de área táctil. Si por
   estética un target queda por debajo, el diseño está mal.
   ============================================================ */

/* box-sizing border-box en todo el shell: el styles.css del proyecto NO lo
   aplica globalmente, así que sin esto el padding se sumaría por fuera y las
   medidas de la spec (sidebar 216, cards min-height 120) saldrían infladas. */
.ds-shell,
.ds-shell *,
.ds-shell *::before,
.ds-shell *::after {
    box-sizing: border-box;
}

/* ---------- 7. Tokens visuales ---------- */
:root {
    --bg-app: #F7F3EB;
    --surface: #FFFFFF;
    --surface-soft: #FBF7F0;
    --accent: #C49A6C;
    --accent-strong: #8B6F41;
    --text: #24221F;
    --text-muted: #6E6A64;
    --border: #E8E1D7;
    --radius-card: 16px;
    --radius-control: 12px;
    --shadow-card: 0 8px 24px rgba(30, 25, 20, .06);
    --shadow-card-hover: 0 12px 32px rgba(30, 25, 20, .10);

    /* 8. Escala de espaciado base 4px. No improvisar valores intermedios. */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;

    /* 3. Arquitectura: medidas del shell */
    --topbar-h: 64px;
    --sidebar-w: 216px;
    --rail-w: 76px;
    --content-max: 1220px;

    /* Área táctil mínima (§2 Touch first) */
    --touch-min: 48px;
}

/* ---------- 6.1 Card táctil (QuickActionCard) ---------- */
.ds-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
}

.ds-card {
    /* Altura idéntica para todas las cards del grid aunque una descripción
       tenga una línea menos (§8 y checklist §12). */
    min-height: 120px;
    display: grid;
    grid-template-columns: 48px 1fr 18px;
    align-items: center;
    gap: var(--sp-4);
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    text-align: left;
    text-decoration: none;
    color: var(--text);
    cursor: pointer;
    width: 100%;
    font-family: inherit;
    transition: box-shadow .18s ease, transform .12s ease, background-color .12s ease;
}

/* El icono vive en un cuadrado de 48x48 y el glyph se renderiza a 28px:
   así todos los iconos arrancan en la MISMA coordenada X aunque el glyph
   tenga anchos distintos (§6.3 y checklist §12). */
.ds-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    color: var(--accent);
    flex-shrink: 0;
}

.ds-card-body {
    min-width: 0;
}

.ds-card-title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
    margin: 0;
}

.ds-card-desc {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted);
    margin: 4px 0 0;
}

.ds-card-chevron {
    font-size: 18px;
    color: var(--text-muted);
    opacity: .55;
    justify-self: end;
}

/* Estados (§6.1). El hover solo en dispositivos con puntero real: en tablet
   no existe hover y el feedback tiene que venir del estado pressed. */
@media (hover: hover) and (pointer: fine) {
    .ds-card:hover {
        box-shadow: var(--shadow-card-hover);
        transform: translateY(-1px);
    }
}

.ds-card:active {
    transform: scale(.985);
    background: var(--surface-soft);
}

.ds-card:focus-visible {
    outline: none;
    box-shadow: var(--shadow-card), 0 0 0 2px rgba(196, 154, 108, .45);
}

.ds-card[disabled],
.ds-card.is-disabled {
    opacity: .45;
    box-shadow: none;
    cursor: not-allowed;
}

/* ---------- 5. Grupos de Administración ---------- */
.ds-group {
    margin-bottom: var(--sp-8);
}

.ds-group-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent-strong);
    margin: 0 0 var(--sp-4);
}

.ds-group-header i {
    font-size: 14px;
    color: var(--accent);
}

/* ---------- 4.1 Cabecera de contenido ---------- */
.ds-page-header {
    margin-bottom: var(--sp-6);
}

.ds-page-title {
    font-size: 26px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    line-height: 1.25;
}

.ds-page-subtitle {
    font-size: 15px;
    color: var(--text-muted);
    margin: 6px 0 0;
}

/* ---------- 6.2 Botón primario de cabecera ---------- */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    height: 46px;
    padding: 0 var(--sp-4);
    border-radius: var(--radius-control);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    position: relative;
    transition: background-color .12s ease, box-shadow .18s ease;
}

/* El botón mide 46px pero el área táctil real llega a 48 con el
   pseudoelemento, sin alterar la altura visual (§6.2). */
.ds-btn::after {
    content: "";
    position: absolute;
    inset: -1px 0;
    min-height: var(--touch-min);
}

.ds-btn i {
    font-size: 18px;
    color: var(--accent);
}

.ds-btn:active {
    background: var(--surface-soft);
}

.ds-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(196, 154, 108, .45);
}

.ds-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.ds-btn-primary i {
    color: #fff;
}

.ds-btn-primary:active {
    background: var(--accent-strong);
}

/* Botón que solo lleva icono: cuadrado de 48x48 completos. Un 46x46 "queda
   mejor" pero incumple el mínimo táctil, y en tablet se falla al pulsarlo. */
.ds-btn-icon {
    width: var(--touch-min);
    height: var(--touch-min);
    padding: 0;
    flex-shrink: 0;
}

/* ---------- 3. AppShell ---------- */
.ds-shell {
    min-height: 100vh;
    background: var(--bg-app);
}

.ds-topbar {
    height: var(--topbar-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: 0 var(--sp-6);
    position: sticky;
    top: 0;
    z-index: 100;
}

.ds-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    /* Es un enlace a Inicio, así que también cumple el mínimo táctil de 48px
       (checklist §12: "no hay elementos interactivos con target inferior a 48x48"). */
    min-height: var(--touch-min);
    padding-right: var(--sp-2);
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}

.ds-brand i {
    color: var(--accent);
    font-size: 20px;
}

.ds-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-left: auto;
}

/* Usuario + avatar (arriba a la derecha) */
.ds-user {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding-left: var(--sp-2);
    font-size: 14px;
    color: var(--text);
    white-space: nowrap;
}

.ds-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #FDEDCF;
    color: var(--accent-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.ds-body {
    display: flex;
    align-items: flex-start;
}

/* ---------- 6.4 Navegación lateral ---------- */
.ds-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    padding: var(--sp-5) var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    position: sticky;
    top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
}

.ds-nav-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    height: 50px;
    padding: 0 var(--sp-3);
    border-radius: var(--radius-control);
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    transition: background-color .12s ease;
    white-space: nowrap;
}

.ds-nav-item i {
    font-size: 21px;
    width: 24px;
    text-align: center;
    color: var(--accent);
    flex-shrink: 0;
}

.ds-nav-item:active {
    background: var(--surface-soft);
}

.ds-nav-item.is-active {
    background: #FDEDCF;
    font-weight: 600;
}

.ds-nav-spacer {
    flex: 1;
}

.ds-content {
    flex: 1;
    min-width: 0;
    max-width: var(--content-max);
    padding: var(--sp-8);
}

/* Navegación inferior: solo en portrait (§9) */
.ds-bottomnav {
    display: none;
}

/* ---------- 4.3 / 9. Responsive ---------- */

/* Tablet landscape estrecho: la sidebar pasa a rail para no robar
   espacio al contenido (§9). */
@media (max-width: 1099px) {
    .ds-sidebar {
        width: var(--rail-w);
        padding: var(--sp-5) var(--sp-2);
    }

    .ds-nav-item {
        justify-content: center;
        height: 54px;
        padding: 0;
    }

    .ds-nav-item span {
        display: none;
    }

    .ds-nav-item i {
        font-size: 22px;
    }
}

@media (max-width: 1279px) {
    .ds-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

/* Tablet portrait: el rail se sustituye por navegación inferior, que en
   vertical es más cómoda para el pulgar. Se mantienen 2 columnas. */
@media (max-width: 899px) {
    .ds-sidebar {
        display: none;
    }

    .ds-content {
        padding: var(--sp-5);
        padding-bottom: 88px;
    }

    .ds-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .ds-bottomnav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 68px;
        background: var(--surface);
        border-top: 1px solid var(--border);
        z-index: 100;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .ds-bottomnav .ds-nav-item {
        flex: 1;
        flex-direction: column;
        gap: 2px;
        height: 100%;
        justify-content: center;
        border-radius: 0;
        font-size: 11px;
    }

    .ds-bottomnav .ds-nav-item span {
        display: block;
    }

    .ds-bottomnav .ds-nav-item i {
        font-size: 20px;
    }

    .ds-bottomnav .ds-nav-item.is-active {
        background: transparent;
        color: var(--accent-strong);
    }

    .ds-topbar {
        padding: 0 var(--sp-4);
    }

    /* En portrait la barra superior se simplifica: los botones de acción se
       quedan solo con icono y el saludo se oculta, pero el avatar permanece. */
    .ds-btn-label,
    .ds-user-name {
        display: none;
    }

    .ds-topbar-actions .ds-btn:not(.ds-btn-icon) {
        width: var(--touch-min);
        padding: 0;
    }

    .ds-user {
        padding-left: 0;
    }
}

/* Una sola columna solo cuando de verdad no caben dos (§4.3). */
@media (max-width: 699px) {
    .ds-card-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ds-card {
        min-height: 108px;
        padding: 18px;
    }
}

/* ---------- 10. Marca de agua ---------- */
.ds-watermark {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 260px;
    opacity: .04;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

@media (max-width: 899px) {
    .ds-watermark {
        display: none;
    }
}

@media print {
    .ds-sidebar,
    .ds-bottomnav,
    .ds-topbar,
    .ds-watermark {
        display: none !important;
    }
}