/* =====================================================================================================
   tema-tower/inicio.css — «look del tower» (#478) para el ÁREA INICIO: Dashboard `/` (Components/Pages/Home.razor),
   notificaciones (campana), chip de empresa, barra superior y menú lateral (ct-appbar, ct-drawer, ct-brand-*, NavMenu) y la
   página de login (Components/Account/Shared/AuthLayout.razor + Login.razor). Se carga DESPUÉS de base.css (App.razor, solo dev).
   Reglas: todo bajo html.tw-tema, solo selectores de clase, guard :not(.tw *) en lo que pueda vivir en el área de
   contenido, valores de tower.css citando la clase que se imita, !important solo donde app.css ya lo usa.
   Contexto: /root/tower-parity/identico/CONTEXTO-TEMA.md · guía: tema/guia-tower.md · base: tema/base.md.

   Qué NO repite de base.css (ya cubierto ahí): tokens, tipografía, franja y drawer, chips de la barra, paneles, KPI (radio,
   cuadrado 26 px, rótulo mono, valor Archivo 800 22), listas en línea, popovers/menús, badge de la campana, alerts, progreso.
   Acá solo se COMPLETA: orden rótulo→valor del KPI, cabecera y filas de los tres paneles del dashboard, vacíos, hover del
   enlace-tarjeta, los menús de la franja (rótulo de sección, ítem marcado, campana) y el login entero (sin Mud ni Bootstrap).

   Anclas usadas (todas propias de estas páginas): .ct-stat-link/.ct-stat-card/.ct-stat-body/.ct-stat-label/.ct-stat-go y
   .ct-sec-head (solo Home.razor); .ct-notif-badge (NotificationBell); .ct-auth-wrapper / .ct-auth-brand* / .ct-auth-card /
   .ct-auth-footer (solo AuthLayout). Los popovers se montan bajo <body> sin ancla propia: sus reglas son generales y se
   explican como tales («caption directo del menú = rótulo de sección», «ítem con ✓ = marcado», «ítem con caption = fila»).
   ===================================================================================================== */

/* ============================================================================================
   1. DASHBOARD `/` — tarjetas KPI = .tw-kpi (177): columna, gap 4, RÓTULO mono arriba, valor Archivo 800 22 abajo.
   base.css dejó la tarjeta en fila (cuadrado de color 26 px = .tw-p-num 945 + cuerpo). El markup del cuerpo es valor →
   rótulo → enlace; el rótulo sube con order:-1 sin tocar el razor.
   ============================================================================================ */
html.tw-tema .ct-stat-card:not(.tw *){ align-items:flex-start; gap:10px; }                      /* .tw-p-card-head (941): cuadrado + texto, gap 10 */
html.tw-tema .ct-stat-body:not(.tw *){ display:flex; flex-direction:column; gap:4px; min-width:0; }   /* .tw-kpi (177): gap 4 */
html.tw-tema .ct-stat-label:not(.tw *){ order:-1; }                                              /* .tw-kpi-label (179) va PRIMERO */
html.tw-tema .ct-stat-value:not(.tw *){ display:flex; align-items:center; min-height:23px; }     /* 22 px × 1,05: el spinner de carga no mueve la tarjeta */
html.tw-tema .ct-stat-go:not(.tw *){ margin-top:2px; }                                           /* .tw-p-abrir (962) ya lo pone base; solo un poco de aire */
/* el enlace que envuelve la tarjeta salta y sombrea al hover (Home.razor <style>): el tower no anima (tower.css:7) y el salto
   de .tw-p-card:hover (943) NO se copia (guía §5.7). base.css apagó la sombra de la tarjeta; acá el salto del enlace. */
html.tw-tema .ct-stat-link:not(.tw *){ transition:none; }
html.tw-tema .ct-stat-link:not(.tw *):hover{ transform:none; }
html.tw-tema .ct-stat-link:hover .ct-stat-card:not(.tw *){ box-shadow:none; }
html.tw-tema .ct-stat-link:hover .ct-stat-go:not(.tw *){ color:var(--tt-deep); }                 /* sin cambio de color al hover */

/* ---- los tres paneles (MudPaper Outlined pa-3 > .ct-sec-head + MudList) = .tw-panel (173) con .tw-panel-head (176) ----
   El paper lleva pa-3 (12 px, !important de Mud): cabecera y lista compensan ese padding con márgenes negativos para que la
   hairline de la cabecera y las filas vayan de borde a borde, como en el tower, sin pisar el padding. */
html.tw-tema .mud-paper:has(> .ct-sec-head):not(.tw *){ display:flex; flex-direction:column; }
html.tw-tema .ct-sec-head:not(.tw *){ margin:-12px -12px 0; padding:11px 14px; border-bottom:1px solid var(--tt-line2); }   /* .tw-panel-head (176) */
html.tw-tema .ct-sec-head .mud-link:not(.tw *){ font-family:var(--tt-mono); font-size:10.5px; font-weight:600; color:var(--tt-deep); letter-spacing:normal; }   /* «Calendario →» = .tw-p-abrir (962) */
/* filas = .tw-e-row (678) 10×13 + .tw-e-tr (677) hairline; hover surface2 llega por base (.mud-list-item-clickable:hover) */
html.tw-tema .mud-paper:has(> .ct-sec-head) > .mud-list:not(.tw *){ margin:0 -12px -12px; padding:0; }
html.tw-tema .mud-paper:has(> .ct-sec-head) .mud-list-item:not(.tw *){ padding:10px 13px; gap:9px; border-bottom:1px solid var(--tt-line2); border-radius:0; }
html.tw-tema .mud-paper:has(> .ct-sec-head) .mud-list-item:last-child:not(.tw *){ border-bottom:0; }
html.tw-tema .mud-paper:has(> .ct-sec-head) .mud-list-item-icon:not(.tw *){ margin-right:0; color:var(--tt-ink3); }        /* el chevron, apagado y chico (§5.5) */
html.tw-tema .mud-paper:has(> .ct-sec-head) .mud-list-item-icon .mud-icon-root:not(.tw *){ font-size:16px; }
/* celda de dos líneas = .tw-e-cell (680) gap 2: nombre = .tw-e-dest (689) 12,5 ink; secundaria = .tw-e-prod (688) 12 ink2 (base) */
html.tw-tema .mud-paper:has(> .ct-sec-head) .mud-list-item-text > .mud-typography-body2:not(.tw *){ display:flex; flex-direction:column; gap:2px; line-height:1.3; }
html.tw-tema .mud-paper:has(> .ct-sec-head) .mud-list-item-text .mud-typography-body2 .mud-typography-body2:not(.tw *){ font-size:12.5px; line-height:1.3; color:var(--tt-ink); }
/* vacío / error del panel («No hay traslados…», «—») = .tw-r-vacio (828) + .tw-r-vacio-txt (829): caja punteada, Hanken 12,5.
   base deja caption en mono 10 para notas; esto es texto corrido. El color queda en ink2 (.mud-secondary-text lo marca !important). */
html.tw-tema .mud-paper:has(> .ct-sec-head) > .mud-typography-caption:not(.tw *){
  font-family:var(--tt-sans); font-size:12.5px; line-height:1.5; letter-spacing:normal; text-align:center;
  background:var(--tt-surface); border:1px dashed var(--tt-line); border-radius:10px; padding:22px; margin-top:12px;
}

/* ============================================================================================
   2. FRANJA SUPERIOR — complementos a base.css §4 (chips, iconos y versión ya están)
   ============================================================================================ */
/* contador de la campana = .tw-e-rmark (662): base lo dimensiona (15 px, radio 4, crit). MudBadge Bordered pinta un borde de
   2 px en --mud-palette-surface (blanco sobre la franja): va del color de la franja para conservar el recorte sin verse. */
html.tw-tema .ct-notif-badge .mud-badge.mud-badge-bordered{ border-color:var(--tt-nav); padding:0 3px; }

/* ---- menús de la franja (empresa, contexto, «ver como», usuario, campana): viven bajo <body>, sin ancla propia → reglas
   generales sobre .mud-menu-list/.mud-menu-item (Mud 8.7 NO les pone .mud-list-item, así que las de base para listas no llegan). ---- */
/* rótulo de sección de un menú (caption directo del .mud-menu-list: «Cambiar de empresa», «Cambiar vista») = .tw-e-side-lbl (555) */
html.tw-tema .mud-menu-list > .mud-typography-caption{ font-family:var(--tt-mono); font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--tt-ink3); display:block; }
/* texto del ítem = .tw-e-item--cons (564): 13 px 600 ink2 (base lo fija en .mud-menu-item, pero el p.body2 interior lo bajaba a 12,5/400) */
html.tw-tema .mud-menu-item .mud-menu-item-text{ font-size:13px; font-weight:600; color:inherit; line-height:normal; }
/* ítem marcado (trae el ✓ como primer hijo del texto) = .tw-e-sel.is-on (658): ink y 700; el ✓ en accent como el punto .tw-e-dot activo (579) */
html.tw-tema .mud-menu-item:has(> .mud-menu-item-text > .mud-icon-root){ color:var(--tt-ink); font-weight:700; }
html.tw-tema .mud-menu-item > .mud-menu-item-text > .mud-icon-root{ color:var(--tt-accent); font-size:16px; width:20px; vertical-align:-3px; }   /* 20 + mr-2 (8) = el separador de 28 px de los no marcados */
/* campana (NotificationBell.razor): título del popover = .tw-h14 (147); filas con línea secundaria = .tw-e-row (678) + .tw-e-tr (677) */
html.tw-tema .mud-menu-list .mud-typography-subtitle2:not(.mud-menu-item *){ font-family:var(--tt-display); font-weight:800; font-size:14px; color:var(--tt-ink); }
html.tw-tema .mud-menu-item:has(.mud-typography-caption){ padding:10px 13px; border-bottom:1px solid var(--tt-line2); border-radius:0; }
html.tw-tema .mud-menu-item:has(.mud-typography-caption):last-child{ border-bottom:0; }
html.tw-tema .mud-menu-item .mud-typography-body2{ font-size:12.5px; line-height:1.3; }                                   /* .tw-e-dest (689) */
html.tw-tema .mud-menu-item .mud-typography-caption{ font-family:var(--tt-sans); font-size:12px; line-height:1.4; letter-spacing:normal; color:var(--tt-ink2); }   /* .tw-e-prod (688) */
html.tw-tema .mud-menu-item .mud-icon-root.mud-primary-text{ color:var(--tt-accent) !important; }   /* aviso no leído: accent como .tw-e-dot--accent (581); Mud marca .mud-*-text !important */

/* ============================================================================================
   3. LOGIN /Account/Login (AuthLayout.razor + Login.razor). Sin MudBlazor y sin Bootstrap: solo .ct-auth-* de app.css más
   clases Bootstrap huérfanas (.form-floating, .form-control, .btn*, .w-100, .checkbox) que nadie define; se definen acá.
   Los selectores de elemento (h1, h2, hr, label, a, svg) van SIEMPRE bajo .ct-auth-card/.ct-auth-brand, que solo existen en
   este layout (sin tower): no pueden rozar a .tw. Receta (guía §5.7): fondo --bg plano; marca = héroe de portada
   (.tw-p-hero 930-935); tarjeta = .tw-p-card (939); título = .tw-ia-empty-title (1060); inputs = .tw-ia-textarea (1086);
   botón = .tw-ia-send (1087); Google/Microsoft = .tw-ia-dl-md (1121); error = .tw-e-alerta (713); pie = .tw-note10 (155).
   ============================================================================================ */
html.tw-tema .ct-auth-wrapper{ background:var(--tt-bg); color:var(--tt-ink); font-family:var(--tt-sans); font-size:13px; line-height:1.5; }   /* .tw (46): sin gradiente */
/* marca = .tw-p-hero (930): isotipo + columna con título y ceja; el isotipo llega con stroke="#FFFFFF" (atributo de presentación: la regla le gana) */
html.tw-tema .ct-auth-brand{ color:var(--tt-ink); gap:14px; }
html.tw-tema .ct-auth-brand .ct-stint-logo [stroke]{ stroke:var(--tt-ink); }
html.tw-tema .ct-auth-brand .ct-brand-word{ color:var(--tt-ink); }
html.tw-tema .ct-auth-brand-sub{ font-family:var(--tt-mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--tt-ink3); margin-top:6px; }   /* .tw-p-eyebrow (933); gap 6 de .tw-p-hero-col (932) */
/* tarjeta = .tw-p-card (939): surface, hairline, radio 14, 18/18/14, SIN sombra */
html.tw-tema .ct-auth-card{ background:var(--tt-surface); border:1px solid var(--tt-line); border-radius:14px; box-shadow:none; padding:18px 18px 14px; }
html.tw-tema .ct-auth-card h1{ font-family:var(--tt-display); font-weight:900; font-size:22px; letter-spacing:-0.02em; line-height:1.1; color:var(--tt-ink); margin:0 0 6px; outline:none; }   /* .tw-ia-empty-title (1060). FocusOnNavigate enfoca el h1 (no es un control): sin anillo */
html.tw-tema .ct-auth-card h2{ font-size:13px; font-weight:400; color:var(--tt-ink2); line-height:1.5; margin:0 0 14px; text-wrap:pretty; }   /* .tw-ia-empty-txt (1061); 14 = gap de .tw-p-card (939) */
/* campo: rótulo mono ARRIBA (= .tw-e-hecho-k 728) e input = .tw-ia-textarea (1086). El markup Bootstrap trae input → label: column-reverse los da vuelta. */
html.tw-tema .ct-auth-card .form-floating{ display:flex; flex-direction:column-reverse; gap:4px; margin-bottom:12px !important; }   /* .mb-3 de Mud es !important */
html.tw-tema .ct-auth-card .form-floating label{ font-family:var(--tt-mono); font-size:9.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--tt-ink3); }
html.tw-tema .ct-auth-card .form-control{
  display:block; width:100%; box-sizing:border-box; font-family:var(--tt-sans); font-size:13px; line-height:1.45; color:var(--tt-ink);
  padding:10px 12px; border:1px solid var(--tt-line); border-radius:9px !important; background:var(--tt-surface2); transition:none; outline:none;   /* app.css marca el radio !important */
}
html.tw-tema .ct-auth-card .form-control::placeholder{ color:var(--tt-ink3); opacity:1; }
html.tw-tema .ct-auth-card .form-control:focus{ border-color:var(--tt-line) !important; box-shadow:none !important; background:var(--tt-surface2); outline:var(--tt-foco); outline-offset:1px; }   /* foco = anillo cian (999); app.css marcó borde y halo !important */
html.tw-tema .ct-auth-card .form-control:-webkit-autofill{ -webkit-box-shadow:0 0 0 40px var(--tt-surface2) inset; -webkit-text-fill-color:var(--tt-ink); }   /* el relleno automático no pinta el campo de amarillo */
/* casilla «Recordarme» = .tw-ia-box (1036-1037): 15 px, radio 4; marcada deep (accent-color sobre el control nativo) */
html.tw-tema .ct-auth-card .checkbox{ margin-bottom:14px !important; }
html.tw-tema .ct-auth-card .checkbox label{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--tt-ink2); cursor:pointer; margin:0; }
html.tw-tema .ct-auth-card .form-check-input{ width:15px; height:15px; margin:0; accent-color:var(--tt-deep); }
/* botón «Ingresar» = .tw-ia-send (1087): mono 11 600, 11×16, radio 9, coral, sin borde; .w-100 no existe sin Bootstrap → ancho completo acá */
html.tw-tema .ct-auth-card .btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; box-sizing:border-box; cursor:pointer; text-decoration:none; transition:none; }
html.tw-tema .ct-auth-card .btn-primary{ font-family:var(--tt-mono); font-size:11px; font-weight:600; letter-spacing:normal; padding:11px 16px; border:0; border-radius:9px !important; background:var(--tt-coral); color:#FFFFFF; }   /* app.css marca el radio !important */
html.tw-tema .ct-auth-card .btn-primary:hover{ opacity:1; transform:none; }                       /* sin hover (tower.css:7) */
/* Google / Microsoft = .tw-ia-dl-md (1121): mono 10,5, 8×10, radio 7, hairline, ink2; el logo del proveedor queda a 16 px (§5.5) */
html.tw-tema .ct-auth-card .btn-outline-secondary{ font-family:var(--tt-mono); font-size:10.5px; font-weight:400; padding:8px 10px; border:1px solid var(--tt-line); border-radius:7px; background:transparent; color:var(--tt-ink2); }
html.tw-tema .ct-auth-card .btn-outline-secondary:hover{ text-decoration:none; color:var(--tt-ink2); }
html.tw-tema .ct-auth-card .btn-outline-secondary svg{ width:16px; height:16px; flex:none; }
html.tw-tema .ct-auth-card .d-flex.flex-column{ align-items:stretch; }
/* separador = .tw-hr (161) */
html.tw-tema .ct-auth-card hr{ border:0; height:1px; background:var(--tt-line2); margin:14px 0; }
/* «¿Olvidaste tu contraseña?» = .tw-p-abrir (962) */
html.tw-tema .ct-auth-card a:not(.btn){ font-family:var(--tt-mono); font-size:10.5px; font-weight:600; color:var(--tt-deep); text-decoration:none; align-self:center; }
html.tw-tema .ct-auth-card a:not(.btn):hover{ text-decoration:none; color:var(--tt-deep); }
/* error de acceso = .tw-e-alerta (713-721): tinte 8 %, borde 25 %, barra izquierda 3 px crit, texto 12,5 ink2 */
html.tw-tema .ct-auth-card .text-danger{ font-size:12.5px; line-height:1.4; color:var(--tt-ink2); background:rgba(199,62,48,0.08); border:1px solid rgba(199,62,48,0.25); border-left:3px solid var(--tt-crit); border-radius:8px; padding:9px 11px; text-wrap:pretty; }
/* pie = .tw-c-foot (291) / .tw-note10 (155) */
html.tw-tema .ct-auth-footer{ font-family:var(--tt-mono); font-size:10px; line-height:1.5; color:var(--tt-ink3); }
/* oscuro (html.tw-tema.tw-dark): los tokens ya cambian solos; solo el control nativo de la casilla debe saber que el fondo es oscuro */
html.tw-tema.tw-dark .ct-auth-card .form-check-input{ color-scheme:dark; }