/* ══════════════════════════════════════════════════════════════════════════
   Diseño «Apple» de SaphirView (v0.66.0)
   ──────────────────────────────────────────────────────────────────────────
   Rediseño según las Human Interface Guidelines de Apple (skill
   github.com/dickwu/apple-design-skill), adaptado a una web de trabajo con la
   marca Saphir. TODO va bajo `html.design-apple`: sin esa clase este fichero no
   hace nada y se ve el diseño clásico (app.css + components.css), intacto.
   Interruptor: App Setting `Ui__Design` (empresa) o «Diseño» en el menú del
   avatar (personal). Ver DesignService.

   Tesis: una mesa de trabajo tranquila y precisa en la que el ESTADO es la señal.
   El azul Saphir se reserva para acciones y selección; el estado lleva sus
   colores semánticos; todo lo demás se calla.

   Reglas aplicadas (fichero › apartado de las HIG):
   - Texto: escritorio por defecto 13 pt / mín. 10; móvil 17 / mín. 11
     (typography.md › Ensuring legibility). Aquí, 15 px en escritorio (una web
     en Windows se lee más pequeña que macOS) y 16 px en móvil (iOS no hace
     zoom en campos ≥ 16 px). Ningún texto por debajo de 11 px.
   - Contraste ≥ 4.5:1 en texto normal y se busca 7:1 en el pequeño
     (accessibility.md › Vision; dark-mode.md › Dark Mode colors).
   - Controles: escritorio 28 px por defecto / 20 mín.; móvil 44 / 28
     (accessibility.md › Mobility; buttons.md › Best practices).
   - Fuente del sistema en texto y controles; la de marca (Plex) en titulares
     (branding.md › Best practices).
   - Translucidez solo en la capa flotante, con alternativa opaca si el sistema
     pide reducir transparencia (materials.md › Liquid Glass).
   - Modo oscuro con colores semánticos y sin interruptor propio de apariencia
     (dark-mode.md › Best practices).
   - Hojas: en móvil suben desde abajo con «grabber» (sheets.md › Mobile).
   - Movimiento breve; con «reducir movimiento», nada (motion.md; accessibility.md
     › Cognitive).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens: claro ─────────────────────────────────────────────────────── */
html.design-apple {
    /* Marca */
    --color-primary:        #2D5A8E;   /* 6.9:1 sobre blanco */
    --color-primary-dark:   #234872;
    --color-primary-light:  #E8EEF6;   /* tinte de selección */
    --color-accent:         #8A5A25;   /* dorado Saphir oscurecido para texto: 6.4:1 */
    --color-on-primary:     #FFFFFF;

    /* Estado: los de marca, oscurecidos hasta AA como texto pequeño */
    --color-success:        #1E7B45;   /* 5.6:1 */
    --color-warning:        #8F5600;   /* 6.3:1 */
    --color-danger:         #B42318;   /* 6.5:1 */
    --color-on-danger:      #FFFFFF;
    --color-on-warning:     #FFFFFF;

    /* Superficies agrupadas (lists-and-tables.md › Style) */
    --color-bg:             #F2F3F7;
    --color-surface:        #FFFFFF;
    --color-surface-raised: #FFFFFF;
    --color-bg-hover:       #F5F6F9;
    --color-fill:           rgba(118, 118, 128, 0.12);   /* relleno de controles */
    --color-fill-strong:    rgba(118, 118, 128, 0.20);

    /* Texto */
    --color-text:           #1A1D2B;   /* 16:1 */
    --color-text-secondary: #545B6E;   /* 6.9:1 sobre blanco, 6.2:1 sobre el fondo */
    --color-text-tertiary:  #7A8094;   /* solo marcadores de posición */

    /* Separadores finos */
    --color-border:         #E1E3EA;
    --color-separator:      rgba(60, 60, 67, 0.16);

    /* Materiales (capa flotante) */
    --material-bar:         rgba(246, 247, 250, 0.78);
    --material-panel:       rgba(255, 255, 255, 0.82);
    --material-blur:        saturate(1.4) blur(24px);

    /* Forma y sombra */
    --radius-sm: 8px;
    --radius:    10px;
    --radius-lg: 14px;
    --shadow-card:  0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.04);
    --shadow-float: 0 10px 38px rgba(16, 24, 40, 0.16), 0 2px 8px rgba(16, 24, 40, 0.06);
    --focus-ring:   0 0 0 3px color-mix(in srgb, var(--color-primary) 40%, transparent);

    /* Tipografía: sistema para leer y operar; Plex como voz de marca en titulares */
    --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
    --font-display: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-sans: var(--font-ui);

    --control-h:    34px;   /* ≥ 28 px en escritorio */
    --control-h-sm: 28px;
    --topbar-height: 52px;

    color-scheme: light;
}

/* ── 2. Tokens: oscuro (sigue al sistema; sin interruptor propio) ──────────── */
@media (prefers-color-scheme: dark) {
    html.design-apple {
        --color-primary:        #7FA9DD;   /* 7.3:1 sobre la superficie */
        --color-primary-dark:   #A2C2EA;
        --color-primary-light:  #22334A;
        --color-accent:         #E2B27E;
        --color-on-primary:     #0B1A2B;

        --color-success:        #5CCB8C;
        --color-warning:        #F2B458;
        --color-danger:         #FF8174;
        --color-on-danger:      #1F0906;
        --color-on-warning:     #1F1300;

        --color-bg:             #0F1115;
        --color-surface:        #1A1D24;
        --color-surface-raised: #232730;   /* capas elevadas, más claras (dark-mode.md) */
        --color-bg-hover:       #222630;
        --color-fill:           rgba(120, 120, 128, 0.24);
        --color-fill-strong:    rgba(120, 120, 128, 0.36);

        --color-text:           #ECEEF3;
        --color-text-secondary: #A6ADBD;   /* 7.6:1 sobre la superficie */
        --color-text-tertiary:  #7D8496;

        --color-border:         #2C313B;
        --color-separator:      rgba(255, 255, 255, 0.10);

        --material-bar:         rgba(22, 25, 31, 0.80);
        --material-panel:       rgba(35, 39, 48, 0.86);

        --shadow-card:  none;
        --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.55);

        color-scheme: dark;
    }
}

/* ── 3. Base ──────────────────────────────────────────────────────────────── */
html.design-apple, html.design-apple body {
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.45;
    background-color: var(--color-bg);
    color: var(--color-text);
    letter-spacing: -0.003em;
}
@media (max-width: 767.98px) {
    html.design-apple, html.design-apple body { font-size: 16px; }
}

.design-apple h1, .design-apple h2, .design-apple h3 { color: var(--color-text); }
.design-apple h1, .design-apple .page-title {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.022em;
}
.design-apple h2 { font-size: 1.25rem; letter-spacing: -0.015em; }
.design-apple h3 { font-size: 1.0667rem; letter-spacing: -0.01em; }

.design-apple a { color: var(--color-primary); }

/* Foco visible y homogéneo en todo lo interactivo (teclado en escritorio). */
.design-apple :where(a, button, input, select, textarea, [tabindex], summary):focus-visible {
    outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm);
}

.design-apple ::selection { background: color-mix(in srgb, var(--color-primary) 28%, transparent); }

/* ── 4. Estructura: barra superior y barra lateral ────────────────────────── */
/* La barra superior es capa funcional flotante: material translúcido + filete. */
.design-apple .topbar {
    background: var(--material-bar);
    -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur);
    border-bottom: 1px solid var(--color-separator);
}
.design-apple .topbar__product { color: var(--color-text); font-weight: 600; letter-spacing: -0.01em; }
.design-apple .topbar__company,
.design-apple .topbar__user { color: var(--color-text-secondary); font-size: 0.8667rem; }
.design-apple .topbar__avatar { background: var(--color-fill); color: var(--color-text-secondary); }
.design-apple .topbar__iconbtn {
    width: 34px; height: 34px; border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
}
.design-apple .topbar__iconbtn:hover { background: var(--color-fill); color: var(--color-text); }
.design-apple .topbar__iconbtn:active { background: var(--color-fill-strong); }
.design-apple .topbar__profile { border-radius: var(--radius-sm); padding: 0.2rem 0.4rem; }
.design-apple .topbar__profile:hover { background: var(--color-fill); }
/* Móvil: barra corta (toolbars.md › Titles: «under 15 characters»). El nombre de la
   empresa y el del usuario ya están en el menú del avatar. */
@media (max-width: 575.98px) {
    .design-apple :is(.topbar__company, .topbar__user, .topbar__caret) { display: none; }
}

/* Barra lateral: «source list» de escritorio. Fondo tintado, elementos de 34 px,
   selección como rectángulo redondeado tintado (sin la barrita lateral).
   Los iconos llevan el color de acento (sidebars.md › Best practices). */
.design-apple .sidebar {
    background: color-mix(in srgb, var(--color-bg) 70%, var(--color-surface));
    border-right: 1px solid var(--color-separator);
}
.design-apple .navmenu { padding: 0.5rem 0.55rem 1rem; gap: 1px; }
.design-apple .navmenu__item {
    min-height: 34px; padding: 0.3rem 0.6rem; gap: 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--color-text); font-size: 0.9333rem; font-weight: 400;
}
.design-apple .navmenu__item::before { display: none; }
.design-apple .navmenu__item:hover { background: var(--color-fill); color: var(--color-text); }
.design-apple .navmenu__item:active { background: var(--color-fill-strong); }
.design-apple .navmenu__item.active {
    background: var(--color-primary-light); color: var(--color-primary); font-weight: 600;
}
.design-apple .navmenu__icon {
    width: 22px; height: 22px; border-radius: 0; font-size: 1.05rem;
    color: var(--color-primary);
}
.design-apple .navmenu__item:hover .navmenu__icon { transform: none; }
.design-apple .navmenu__item.active .navmenu__icon { background: none; box-shadow: none; }
/* Cabeceras de grupo cortas y discretas, sin versalitas (sidebars.md). */
.design-apple .navmenu__group {
    padding: 0.95rem 0.6rem 0.3rem; opacity: 1;
    font-size: 0.7333rem; font-weight: 600; text-transform: none; letter-spacing: 0;
    color: var(--color-text-secondary);
}
.design-apple .navmenu__badge,
.design-apple .navmenu__dot,
.design-apple .notif-badge {
    background: var(--color-danger); color: var(--color-on-danger);
    font-size: 0.7333rem; box-shadow: none;
}
.design-apple .navmenu__dot { font-size: 0.7333rem; min-width: 1.15rem; line-height: 1.15rem; }
.design-apple .navmenu__spacer { background: var(--color-separator); }
.design-apple .navmenu__versions a { font-size: 0.7333rem; }

/* Móvil: el panel lateral flota sobre el contenido → material y velo del 35 %
   (materials.md › Liquid Glass). Filas de 44 px. */
@media (max-width: 767.98px) {
    .design-apple .sidebar {
        top: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
        background: var(--material-panel);
        -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur);
        border-right: none; box-shadow: var(--shadow-float);
    }
    .design-apple .sidebar-backdrop {
        top: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
        background: rgba(0, 0, 0, 0.35);
    }
    .design-apple .navmenu__item { min-height: 44px; font-size: 1rem; }
}

.design-apple .layout__content { padding: 1.75rem 2rem 2.5rem; }
@media (max-width: 767.98px) {
    .design-apple .layout__content { padding: 1.1rem 1rem 2rem; }
}

/* ── 5. Cabecera de página ───────────────────────────────────────────────── */
.design-apple .page-title { margin-bottom: 1.1rem; }
.design-apple .page-header { margin-bottom: 1.25rem; }
.design-apple .page-lead { color: var(--color-text-secondary); font-size: 1rem; }
.design-apple .back-link { color: var(--color-primary); font-size: 0.9333rem; }
.design-apple .back-link:hover { color: var(--color-primary-dark); text-decoration: none; }

/* ── 6. Botones ──────────────────────────────────────────────────────────── */
/* Jerarquía por estilo, no por tamaño (buttons.md › Style): relleno = acción
   principal; tintado = secundaria; rojo = destructiva. Siempre con estado de
   pulsado (buttons.md › Best practices). */
.design-apple :is(.btn-primary, .btn-secondary, .btn-danger) {
    min-height: var(--control-h); padding: 0 0.95rem;
    justify-content: center; gap: 0.4rem;
    border: none; border-radius: var(--radius-sm);
    font: inherit; font-size: 0.9333rem; font-weight: 500; line-height: 1.2;
    transition: background-color 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}
.design-apple .btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.design-apple .btn-primary:hover { background: var(--color-primary-dark); color: var(--color-on-primary); }
.design-apple .btn-secondary { background: var(--color-primary-light); color: var(--color-primary); }
.design-apple .btn-secondary:hover { background: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface)); }
.design-apple .btn-danger { background: var(--color-danger); color: var(--color-on-danger); }
.design-apple .btn-danger:hover { filter: brightness(0.94); }
.design-apple :is(.btn-primary, .btn-secondary, .btn-danger, .btn-icon):active:not(:disabled) { transform: scale(0.97); }
.design-apple :is(.btn-primary, .btn-secondary, .btn-danger):disabled { opacity: 0.45; }
.design-apple .btn-primary:disabled:hover { background: var(--color-primary); }
.design-apple .btn-secondary:disabled:hover { background: var(--color-primary-light); }
.design-apple .btn-sm { min-height: var(--control-h-sm); padding: 0 0.7rem; font-size: 0.8667rem; }

.design-apple .btn-icon {
    width: 32px; height: 32px; border: none; border-radius: var(--radius-sm);
    background: transparent; color: var(--color-text-secondary);
}
.design-apple .btn-icon:hover { background: var(--color-fill); color: var(--color-primary); }
.design-apple .btn-icon--danger:hover { color: var(--color-danger); }

.design-apple .btn-link { color: var(--color-primary); text-decoration: none; font-weight: 500; }
.design-apple .btn-link:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
    html.design-apple { --control-h: 44px; --control-h-sm: 36px; }
    .design-apple :is(.btn-primary, .btn-secondary, .btn-danger) { font-size: 1rem; }
    .design-apple .btn-icon { width: 44px; height: 44px; }
    .design-apple .topbar__iconbtn { width: 44px; height: 44px; }
}

/* ── 7. Campos de formulario ─────────────────────────────────────────────── */
.design-apple .field {
    min-height: var(--control-h); padding: 0.4rem 0.7rem;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-surface); color: var(--color-text);
    font: inherit; font-size: 0.9333rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.design-apple textarea.field { min-height: 0; line-height: 1.45; }
.design-apple .field::placeholder { color: var(--color-text-tertiary); }
.design-apple .field:focus { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.design-apple .field:disabled {
    background: var(--color-fill); border-style: solid; border-color: transparent;
    color: var(--color-text); -webkit-text-fill-color: var(--color-text);
}
.design-apple .field--error { border-color: var(--color-danger); }
.design-apple .field--error:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 30%, transparent); }
@media (max-width: 767.98px) {
    .design-apple .field { font-size: 16px; }   /* iOS no amplía al enfocar */
}
.design-apple .form-field > span,
.design-apple .field-label { font-size: 0.8667rem; font-weight: 500; color: var(--color-text-secondary); }
.design-apple .field-check { font-size: 0.9333rem; min-height: 28px; }
.design-apple .field-check input,
.design-apple .col-check input { accent-color: var(--color-primary); width: 1.05rem; height: 1.05rem; }
.design-apple input[type="checkbox"], .design-apple input[type="radio"] { accent-color: var(--color-primary); }

/* ── 8. Tarjetas y fichas: grupos sobre fondo gris ───────────────────────── */
.design-apple :is(.card, .detail-card, .home-card, .status-card, .dash-card, .info-block, .no-access) {
    background: var(--color-surface);
    border: 1px solid transparent; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
@media (prefers-color-scheme: dark) {
    .design-apple :is(.card, .detail-card, .home-card, .status-card, .dash-card, .info-block, .no-access) {
        border-color: var(--color-border);
    }
}
.design-apple .detail-card { padding: 1.25rem 1.4rem; margin-bottom: 1.1rem; }
.design-apple .card__title,
.design-apple .detail-card__title {
    color: var(--color-text); font-size: 1.0667rem; font-weight: 600; letter-spacing: -0.01em;
}
.design-apple .home-card:hover { box-shadow: var(--shadow-float); }
.design-apple a.dash-card:hover { border-color: var(--color-primary); }
.design-apple .dash-card__num { font-family: var(--font-display); font-weight: 600; }
/* Acentos laterales de estado: más finos; el texto ya dice el estado. */
.design-apple :is(.status-card, .pending-card, .dash-card--danger, .dash-card--warning) { border-left-width: 3px; }
.design-apple .status-card--ok { border-left-color: var(--color-success); }
.design-apple .status-card--down { border-left-color: var(--color-danger); }
.design-apple .status-card--warn { border-left-color: var(--color-warning); }
.design-apple .info-block--done { border-color: var(--color-success); }

/* Secciones dentro de una ficha: sin versalitas ni azul (el azul es para actuar). */
.design-apple .detail-section {
    text-transform: none; letter-spacing: -0.005em;
    font-size: 0.9333rem; font-weight: 600; color: var(--color-text);
    border-bottom: 1px solid var(--color-separator);
}
.design-apple .detail-label {
    text-transform: none; letter-spacing: 0;
    font-size: 0.8rem; color: var(--color-text-secondary);
}
.design-apple .detail-hint { color: var(--color-text-secondary); font-size: 0.8667rem; }
.design-apple .detail-hint--blocker { color: var(--color-warning); }
.design-apple .detail-readonly { background: var(--color-fill); border-color: transparent; font-size: 0.8rem; }
.design-apple .modal__subtitle,
.design-apple .item-card__title {
    text-transform: none; letter-spacing: 0; font-size: 0.8667rem; font-weight: 600;
    color: var(--color-text-secondary);
}
.design-apple .help-section__title { color: var(--color-text); }

/* ── 9. Tablas: lista agrupada ───────────────────────────────────────────── */
.design-apple .data-table {
    background: var(--color-surface); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card); border: 1px solid transparent;
}
@media (prefers-color-scheme: dark) {
    .design-apple .data-table { border-color: var(--color-border); }
}
/* Cabeceras: sustantivos, sin versalitas (lists-and-tables.md › Content). */
.design-apple .data-table thead th {
    background: transparent; color: var(--color-text-secondary);
    font-size: 0.8rem; font-weight: 600; text-transform: none; letter-spacing: 0;
    padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--color-separator);
}
.design-apple .data-table tbody td {
    padding: 0.6rem 0.9rem; font-size: 0.9333rem;
    border-top: 1px solid var(--color-separator);
}
.design-apple .data-table tbody tr:first-child td { border-top: none; }
.design-apple .data-table tbody tr:hover,
.design-apple .row-clickable:hover { background: var(--color-bg-hover); }
.design-apple .row-selected td { background: var(--color-primary-light); }
@media (max-width: 767.98px) {
    .design-apple .data-table tbody td { padding-top: 0.75rem; padding-bottom: 0.75rem; }   /* filas ≥ 44 px */
}
.design-apple .circuit-row td { background: var(--color-bg); }

/* ── 10. Estado: badges y avisos (el color con texto, nunca solo) ────────── */
.design-apple .badge {
    --badge-c: var(--color-text-secondary);
    padding: 0.18rem 0.6rem; border-radius: 999px;
    font-size: 0.8rem; font-weight: 600; letter-spacing: -0.005em;
    color: var(--badge-c);
    background: color-mix(in srgb, var(--badge-c) 13%, var(--color-surface));
}
.design-apple :is(.badge--inprogress, .badge--draftapproved, .badge--kind-producto) { --badge-c: var(--color-primary); }
.design-apple :is(.badge--inapproval, .badge--warning, .badge--finalreview, .badge--qualityreview,
    .badge--inreview, .badge--assign-finalreview, .badge--assign-qualityreview, .badge--cycle-regulatorychange) { --badge-c: var(--color-warning); }
.design-apple :is(.badge--approved, .badge--success, .badge--assign-approved) { --badge-c: var(--color-success); }
.design-apple :is(.badge--rejected, .badge--danger, .badge--assign-returned) { --badge-c: var(--color-danger); }
.design-apple :is(.badge--withsupplier, .badge--assign-withsupplier, .badge--cycle-restyling, .badge--kind-gama) { --badge-c: var(--color-accent); }
.design-apple :is(.badge--draft, .badge--archived, .badge--muted, .badge--obsolete,
    .badge--assign-cancelled, .badge--cycle-new, .badge--kind-troquel) { --badge-c: var(--color-text-secondary); }

.design-apple .form-alert { border-radius: var(--radius); font-size: 0.9rem; padding: 0.65rem 0.9rem; }
.design-apple .form-alert--info { background: var(--color-primary-light); color: var(--color-primary); }
.design-apple .form-alert--success { background: color-mix(in srgb, var(--color-success) 13%, var(--color-surface)); color: var(--color-success); }
.design-apple .form-alert--danger { background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface)); color: var(--color-danger); }
.design-apple .parse-preview--warn { background: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface)); color: var(--color-warning); }
.design-apple .analysis__allergens--bad { background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface)); border-color: var(--color-danger); }
.design-apple .access-chip { background: var(--color-primary-light); color: var(--color-primary); }
.design-apple .selection-bar { border-radius: var(--radius); }
.design-apple .impersonation-bar { background: var(--color-warning); color: var(--color-on-warning); }
.design-apple .impersonation-bar__exit { color: inherit; border-color: currentColor; background: transparent; }
.design-apple .impersonation-bar__exit:hover { background: rgba(255, 255, 255, 0.18); }

/* ── 11. Control segmentado (también las «pestañas» de un modal) ─────────── */
/* Opciones muy relacionadas sobre una misma vista (segmented-controls.md). */
.design-apple .tabs {
    display: inline-flex; gap: 2px; padding: 2px; border: none;
    background: var(--color-fill); border-radius: 9px; margin-bottom: 1rem;
}
.design-apple .tab {
    min-height: 28px; padding: 0 0.85rem; margin: 0; border: none; border-radius: 7px;
    font: inherit; font-size: 0.8667rem; font-weight: 500; color: var(--color-text);
}
.design-apple .tab:hover { color: var(--color-text); background: var(--color-fill); }
.design-apple .tab--active {
    background: var(--color-surface-raised); color: var(--color-text); font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

/* ── 12. Capa flotante: menús, campana, aviso emergente, panel de ayuda ──── */
.design-apple :is(.profile-dropdown, .notif-dropdown, .notif-toast) {
    background: var(--material-panel);
    -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur);
    border: 1px solid var(--color-separator); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float);
}
.design-apple :is(.profile-dropdown, .notif-dropdown, .notif-toast) { top: calc(var(--topbar-height) + 6px); }
.design-apple .notif-toast { border-left: 1px solid var(--color-separator); }
.design-apple .profile-dropdown__header { border-bottom-color: var(--color-separator); }
.design-apple .profile-dropdown__section { border-top-color: var(--color-separator); }
.design-apple .profile-dropdown__sectiontitle {
    text-transform: none; letter-spacing: 0; font-size: 0.8rem; font-weight: 600;
}
.design-apple .profile-dropdown__item { min-height: 32px; padding: 0.4rem 0.65rem; border-radius: var(--radius-sm); }
.design-apple .profile-dropdown__item:hover { background: var(--color-fill); }
.design-apple .profile-dropdown__item i { color: var(--color-primary); }
.design-apple .profile-dropdown__avatar { background: var(--color-fill); color: var(--color-text-secondary); }
.design-apple .notif-dropdown__head { border-bottom-color: var(--color-separator); }
.design-apple .notif-item { border-bottom-color: var(--color-separator); }
.design-apple .notif-item:hover { background: var(--color-fill); }
.design-apple .notif-item--unread { background: color-mix(in srgb, var(--color-primary) 9%, transparent); }
@media (max-width: 767.98px) {
    .design-apple .profile-dropdown__item, .design-apple .notif-item { min-height: 44px; }
}

.design-apple .help-drawer {
    background: var(--material-panel);
    -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur);
    border-left: 1px solid var(--color-separator); box-shadow: var(--shadow-float);
}
.design-apple .help-drawer__head { border-bottom-color: var(--color-separator); }
.design-apple .help-backdrop { background: rgba(0, 0, 0, 0.35); }

/* ── 13. Modales: hoja centrada en escritorio, desde abajo en móvil ──────── */
.design-apple .modal-backdrop { background: rgba(0, 0, 0, 0.35); }
.design-apple .modal {
    background: var(--color-surface-raised); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float);
}
.design-apple .modal__header { border-bottom-color: var(--color-separator); }
.design-apple .modal__footer { border-top-color: var(--color-separator); }
.design-apple .modal__title { font-size: 1.0667rem; font-weight: 600; }
@media (max-width: 575.98px) {
    .design-apple .modal-backdrop { align-items: flex-end; padding: 0; }
    .design-apple .modal {
        width: 100%; max-width: none; max-height: 92vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        animation: sv-sheet-up 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    /* «Grabber»: señala que es una hoja (sheets.md › Mobile). */
    .design-apple .modal::before {
        content: ""; display: block; flex: 0 0 auto;
        width: 36px; height: 5px; border-radius: 3px;
        margin: 6px auto 0; background: var(--color-fill-strong);
    }
    /* Cancelar y confirmar a lo ancho, cómodos con el pulgar. */
    .design-apple .modal__footer { flex-wrap: wrap; }
    .design-apple .modal__footer > * { flex: 1 1 auto; }
}
@keyframes sv-sheet-up { from { transform: translateY(100%); } to { transform: none; } }

/* ── 14. Piezas concretas ────────────────────────────────────────────────── */
/* Login: tarjeta sobre el fondo agrupado. */
.design-apple .login-layout { background: var(--color-bg); }
.design-apple .login-card {
    border: 1px solid transparent; border-radius: 20px; box-shadow: var(--shadow-float);
    background: var(--color-surface);
}
.design-apple .login-card__title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }

/* Barra de fases: el elemento firma. Puntos sin borde grueso, tramo fino. */
.design-apple .progress-step + .progress-step::before { height: 2px; top: 14px; background: var(--color-separator); }
.design-apple .progress-step--done + .progress-step::before { background: var(--color-success); }
.design-apple .progress-step__dot {
    width: 30px; height: 30px; border-width: 1.5px; border-color: var(--color-border);
    background: var(--color-surface); font-size: 0.8667rem;
}
.design-apple .progress-step--done .progress-step__dot { background: var(--color-success); border-color: var(--color-success); color: var(--color-on-primary); }
.design-apple .progress-step--current .progress-step__dot {
    background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary);
    box-shadow: 0 0 0 4px var(--color-primary-light);
}
.design-apple .progress-step__label { font-size: 0.8rem; }
.design-apple .progress-step__hint { font-size: 0.7333rem; color: var(--color-warning); }

/* Asistente de alta y «Analizar etiqueta». */
.design-apple .wizard__num { background: var(--color-fill-strong); color: var(--color-text-secondary); }
.design-apple .wizard__step--active .wizard__num,
.design-apple .step-num { background: var(--color-primary); color: var(--color-on-primary); }
.design-apple .wizard__step--done .wizard__num { background: var(--color-success); color: var(--color-on-primary); }
.design-apple .choice { border-radius: var(--radius-lg); border-color: transparent; box-shadow: var(--shadow-card); }
.design-apple .choice:hover { border-color: var(--color-primary); box-shadow: var(--shadow-float); transform: none; }
.design-apple .item-card { background: var(--color-surface); border-color: var(--color-separator); border-radius: var(--radius-lg); }
.design-apple .upload-panel { background: var(--color-surface); border-color: var(--color-border); border-radius: var(--radius-lg); }
.design-apple :is(.reopen-scope__option, .decide-card__list li, .circuit-step, .review-summary__file,
    .pick-list__item, .essence-pick, .tenant-list, .supplier-picker, .dt-option) { border-radius: var(--radius); }
.design-apple :is(.decide-card__list li, .review-summary__file, .inci-raw, .analysis__label) { background: var(--color-bg); }

/* Chat del asistente: burbuja propia en azul, la del asistente en superficie. */
.design-apple .chat__bubble { border-radius: 18px; border-color: var(--color-separator); background: var(--color-surface); }
.design-apple .chat__msg--user .chat__bubble { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }

/* Imágenes con fondo blanco: suavizadas en oscuro (dark-mode.md › Dark Mode colors). */
@media (prefers-color-scheme: dark) {
    .design-apple :is(.topbar__logo, .login-card__logo) { filter: brightness(0) invert(0.92); }
    .design-apple :is(.crop__img, .crop-zoom__img) { filter: brightness(0.9); }
    .design-apple .env-bar { color: #1A1D2B; }
}

/* Barra de error de Blazor: texto oscuro sobre amarillo, legible en los dos modos. */
.design-apple #blazor-error-ui { background: #FFF4CC; color: #1A1D2B; border-top-color: #E0C000; font-size: 0.9333rem; }
.design-apple #blazor-error-ui a { color: #234872; }

/* ── 15. Accesibilidad del sistema ───────────────────────────────────────── */
/* Reducir transparencia → materiales opacos (materials.md; liquid-glass.md). */
@media (prefers-reduced-transparency: reduce) {
    html.design-apple { --material-bar: var(--color-surface); --material-panel: var(--color-surface-raised); }
    .design-apple :is(.topbar, .sidebar, .profile-dropdown, .notif-dropdown, .notif-toast, .help-drawer) {
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
}
/* Más contraste → separadores y bordes visibles. */
@media (prefers-contrast: more) {
    html.design-apple { --color-separator: var(--color-text-secondary); --color-border: var(--color-text-secondary); }
}
/* Reducir movimiento → sin desplazamientos ni escalados. */
@media (prefers-reduced-motion: reduce) {
    .design-apple .modal { animation: none; }
    .design-apple :is(.btn-primary, .btn-secondary, .btn-danger, .btn-icon):active:not(:disabled) { transform: none; }
    .design-apple * { transition-duration: 0.01ms !important; }
}