/* =====================================================================
   Acme · puente del prototipo a Radzen.Blazor
   ---------------------------------------------------------------------
   ESTADO: PROPUESTA. Cada nombre de variable y de clase se verificó
   contra la hoja compilada de Radzen.Blazor 11.3.2 (standard-base y
   standard-dark-base). Falta probar el archivo completo en una app: la
   primera que lo use lo confirma o lo corrige aquí.

   Qué hace: traduce los tokens del prototipo (--brand, --ground, --text…)
   a las variables de Radzen (--rz-*). No define ningún color propio: si
   cambias la marca o un neutro, lo cambias en app.css y esto lo sigue.

   Orden de carga en App.razor (ver ESPECIFICACION.md §4):
     1. _content/Radzen.Blazor/css/standard-base.css   (o standard-dark-base.css)
     2. app.css          ← copia de prototipo/styles.css: tokens y patrones
     3. radzen-tema.css  ← este archivo

   Por qué html[data-theme] y no :root: Radzen declara sus variables en
   :root (especificidad 0,1,0); html[data-theme] pesa 0,1,1 y gana aunque
   la hoja de Radzen llegue después. Se gana por especificidad, no por orden.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Escala neutra --rz-base-50…900
   En Radzen la escala va de claro a oscuro EN LOS DOS MODOS; lo que cambia
   es a qué paso apunta cada variable semántica. Por eso hay una escala por
   modo, armada con los neutros teñidos. Los pasos intermedios se mezclan
   con color-mix para no inventar hex nuevos.
   Se repite dentro de .chrome porque var() se resuelve donde se declara:
   si solo viviera en <html>, el chrome heredaría los valores del lienzo.
   --------------------------------------------------------------------- */
html[data-theme="light"],
html[data-theme="light"] .chrome{
  --rz-base-50:  var(--surface);
  --rz-base-100: var(--ground);
  --rz-base-200: var(--line-soft);
  --rz-base-300: var(--line);
  --rz-base-400: color-mix(in srgb, var(--line) 50%, var(--faint));
  --rz-base-500: var(--faint);
  --rz-base-600: color-mix(in srgb, var(--faint) 50%, var(--muted));
  --rz-base-700: var(--muted);
  --rz-base-800: color-mix(in srgb, var(--muted) 50%, var(--text));
  --rz-base-900: var(--text);
}
/* Medio oscuro («dark»), muy oscuro («deep») y los extendidos oscuros comparten la fórmula: la
   escala sale de los tokens, que ya cambian con cada modo en app.css. Un modo extendido nuevo se
   agrega a esta lista (o a la clara, si se apoya en la hoja clara de Radzen). */
html[data-theme="dark"],
html[data-theme="dark"] .chrome,
html[data-theme="deep"],
html[data-theme="deep"] .chrome,
html[data-theme="cobalto"],
html[data-theme="cobalto"] .chrome{
  --rz-base-50:  color-mix(in srgb, var(--text) 60%, #fff);
  --rz-base-100: var(--text);
  --rz-base-200: color-mix(in srgb, var(--text) 50%, var(--muted));
  --rz-base-300: var(--muted);
  --rz-base-400: var(--faint);
  --rz-base-500: color-mix(in srgb, var(--faint) 50%, var(--line));
  --rz-base-600: var(--line);
  --rz-base-700: var(--line-soft);
  --rz-base-800: var(--surface-2);
  --rz-base-900: var(--ground);
}


/* ---------------------------------------------------------------------
   2. Semánticos, marca y estados: una sola lista para los dos modos,
   porque los tokens del prototipo ya cambian solos con data-theme.
   --------------------------------------------------------------------- */
html[data-theme],
html[data-theme] .chrome{
  /* lienzo, superficies y texto */
  --rz-body-background-color: var(--ground);
  --rz-base-background-color: var(--surface);
  --rz-text-color: var(--text);
  --rz-text-title-color: var(--text);
  --rz-text-secondary-color: var(--muted);
  --rz-text-tertiary-color: var(--faint);
  --rz-text-font-family: var(--sans);
  --rz-link-color: var(--accent);
  --rz-link-hover-color: var(--text);
  --rz-border-normal: 1px solid var(--line);
  --rz-outline-color: var(--accent);        /* foco: 2px del acento, como el prototipo */

  /* Marca. OJO con los nombres: en Radzen «-lighter» NO es un color más
     claro sino un tinte translúcido para fondos (como nuestro --brand-bg),
     y «on-…-lighter» es el texto que va encima. Nuestro --brand-lighter
     (#05B1CF) no se mapea aquí: pintaría de cian las filas y pastillas. */
  --rz-primary: var(--brand);
  --rz-primary-light: var(--brand-light);
  --rz-primary-lighter: var(--brand-bg);
  --rz-primary-dark: var(--brand-dark);
  --rz-primary-darker: var(--brand-darker);
  --rz-on-primary: var(--on-brand);
  --rz-on-primary-lighter: var(--accent);

  /* Los avisos informativos van en la escala de la marca, no en el azul
     de fábrica, que compite con ella (§3.4). */
  --rz-info: var(--accent);
  --rz-info-light: var(--brand-light);
  --rz-info-lighter: var(--brand-bg);
  --rz-info-dark: var(--brand-dark);
  --rz-info-darker: var(--brand-darker);
  --rz-on-info-lighter: var(--accent);

  --rz-on-info: var(--surface);

  /* Estados: el rojo solo para errores. Radzen tiene «danger» y también
     «error»; las dos familias apuntan al mismo token.
     Texto sobre el estado sólido = --surface: en oscuro los estados son
     claros y piden texto oscuro; en claro son hondos y piden blanco, y
     --surface es justo eso en cada modo. */
  --rz-success: var(--ok);
  --rz-success-lighter: var(--ok-bg);
  --rz-on-success: var(--surface);
  --rz-on-success-lighter: var(--ok);
  --rz-warning: var(--warn);
  --rz-warning-lighter: var(--warn-bg);
  --rz-on-warning: var(--surface);
  --rz-on-warning-lighter: var(--warn);
  --rz-danger: var(--err);
  --rz-danger-lighter: var(--err-bg);
  --rz-on-danger: var(--surface);
  --rz-on-danger-lighter: var(--err);
  --rz-error: var(--err);
  --rz-error-lighter: var(--err-bg);
  --rz-on-error: var(--surface);
  --rz-on-error-lighter: var(--err);

  /* formas (§3.6) */
  --rz-border-radius: var(--r-field);
  --rz-button-border-radius: var(--r-pill);
  --rz-badge-border-radius: var(--r-pill);
  --rz-badge-pill-border-radius: var(--r-pill);
  --rz-input-border-radius: var(--r-field);
  --rz-card-border-radius: var(--r-card);
  --rz-dialog-border-radius: 16px;
  --rz-notification-border-radius: 12px;
  --rz-tooltip-border-radius: 9px;

  /* tarjetas */
  --rz-card-background-color: var(--surface);
  --rz-card-border: 1px solid var(--line);
  --rz-card-shadow: var(--shadow);

  /* chrome: encabezado y columna */
  --rz-header-background-color: color-mix(in srgb, var(--ground) 72%, transparent);
  --rz-header-color: var(--text);
  --rz-header-border: 1px solid var(--line-soft);
  --rz-header-shadow: none;
  --rz-sidebar-background-color: var(--ground);
  --rz-sidebar-color: var(--text);
  --rz-sidebar-border-inline-end: 1px solid var(--line-soft);
  --rz-sidebar-width: var(--sidebar);       /* el riel cambia --sidebar, ver §5 abajo */

  /* campos: standard los trae sin borde; el prototipo sí lo lleva */
  --rz-input-background-color: var(--ground-2);
  --rz-input-border: 1px solid var(--line);
  --rz-input-hover-border: 1px solid var(--brand-light);
  --rz-input-focus-border: 1px solid var(--brand-light);
  --rz-input-shadow: none;
  --rz-input-hover-shadow: none;
  --rz-input-focus-shadow: 0 0 0 3px var(--brand-bg);   /* anillo de foco, como el prototipo (U7) */
  --rz-input-value-color: var(--text);
  --rz-input-placeholder-color: var(--faint);
  --rz-input-disabled-opacity: .5;

  /* mensajes de los validadores: texto rojo debajo del campo, no globo */
  --rz-form-error-color: var(--err);
  --rz-form-error-font-size: 12.5px;
  --rz-validator-text-padding: 6px 0 0;
  --rz-validator-background-color: var(--err);         /* solo si alguien usa Popup="true" */
  --rz-validator-color: var(--surface);
  --rz-validator-shadow: var(--shadow);

  /* rejilla, para cuando de verdad se comparan columnas (§5.2) */
  --rz-grid-background-color: var(--surface);
  --rz-grid-border: 1px solid var(--line);
  --rz-grid-border-radius: var(--r-card);
  --rz-grid-shadow: var(--shadow);
  --rz-grid-header-background-color: var(--surface-2);
  --rz-grid-header-color: var(--faint);
  --rz-grid-header-font-size: 11px;
  --rz-grid-header-text-transform: uppercase;
  --rz-grid-cell-border: 1px solid var(--line-soft);
  --rz-grid-stripe-background-color: var(--surface);   /* sin rayado: la línea tenue basta */
  --rz-grid-hover-background-color: var(--surface-2);
  --rz-grid-selected-background-color: var(--brand-bg);

  /* diálogos */
  --rz-dialog-background-color: var(--surface);
  --rz-dialog-title-background-color: var(--surface);
  --rz-dialog-title-color: var(--text);
  --rz-dialog-title-font-size: 22px;
  --rz-dialog-title-font-weight: 400;
  --rz-dialog-shadow: 0 30px 80px -30px rgba(0,0,0,.6);
  --rz-dialog-mask-background-color: color-mix(in srgb, var(--ground) 66%, transparent);

  /* avisos: tarjeta neutra con el ícono en el color del estado, como el
     toast del prototipo. El fondo sólido de fábrica (verde con texto
     blanco) no pasa contraste en oscuro. */
  --rz-notification-shadow: var(--shadow);
  --rz-notification-success-background-color: var(--surface);
  --rz-notification-success-color: var(--text);
  --rz-notification-success-icon-color: var(--ok);
  --rz-notification-info-background-color: var(--surface);
  --rz-notification-info-color: var(--text);
  --rz-notification-info-icon-color: var(--accent);
  --rz-notification-warning-background-color: var(--surface);
  --rz-notification-warning-color: var(--text);
  --rz-notification-warning-icon-color: var(--warn);
  --rz-notification-error-background-color: var(--surface);
  --rz-notification-error-color: var(--text);
  --rz-notification-error-icon-color: var(--err);

  /* tooltip y gráfica */
  --rz-tooltip-background-color: var(--surface-3);
  --rz-tooltip-color: var(--text);
  --rz-tooltip-shadow: var(--shadow);
  --rz-series-1: var(--chart);
  --rz-chart-area-opacity: .22;             /* el prototipo usa degradado; Radzen, opacidad plana */
  --rz-chart-axis-color: var(--line);
  --rz-chart-axis-label-color: var(--faint);
  --rz-chart-axis-font-size: 10.5px;
  --rz-chart-grid-line-color: var(--line-soft);
  --rz-chart-tooltip-background: var(--surface-3);
  --rz-chart-tooltip-color: var(--text);

  /* Tipografía de RadzenText. Solo H1–H3 tienen equivalente en el
     prototipo: título de página, título de sección y título de tarjeta.
     H4–H6 no se usan; si hacen falta, primero se agregan al prototipo. */
  --rz-body-font-size: 15px;
  --rz-text-h1-font-size: clamp(26px, 2.6vw, 32px);
  --rz-text-h1-font-weight: 400;
  --rz-text-h1-letter-spacing: -.02em;
  --rz-text-h2-font-size: 22px;
  --rz-text-h2-font-weight: 400;
  --rz-text-h2-letter-spacing: -.015em;
  --rz-text-h3-font-size: 15px;
  --rz-text-h3-font-weight: 600;
  --rz-text-h3-letter-spacing: 0;
}


/* ---------------------------------------------------------------------
   3. Lo que no tiene variable: se gana por especificidad y se deja escrito.
   --------------------------------------------------------------------- */

/* Trampa (§4): standard cablea el fondo del body a un hex y le pone una
   imagen de manchas de color. Sin esto, cambias la paleta y «no pasa nada». */
html:root[data-theme] body{background:var(--ground);background-image:none}

/* Radzen no tiene variable para la fuente de los títulos: se pone a mano.
   Serifa en título de página, de sección, de diálogo y de estado vacío;
   el título de tarjeta (H3) se queda en la sans. */
html .rz-text-h1, html .rz-text-h2,
html .rz-text-display-h1, html .rz-text-display-h2,
html .rz-dialog-title{font-family:var(--display)}

/* La tarjeta del prototipo lleva fondo, borde Y sombra. En Radzen la
   variante filled (la de fábrica) trae solo sombra y la outlined solo
   borde, con fondo transparente. Se le agrega el borde a la filled. */
html .rz-card.rz-variant-filled{border:var(--rz-card-border)}

/* Campo con error. Radzen le pone al control la clase .invalid del EditContext de
   Blazor, pero el tema standard NO la pinta (solo la etiqueta dentro de
   RadzenFormField). Sin esto, un campo con error se ve igual que uno bueno y el
   único aviso es el texto rojo de abajo. Clases verificadas en 11.3.2.
   Se redefinen las VARIABLES de borde dentro del control, no el borde: así las
   reglas de hover y foco de Radzen, que pesan más, también salen en rojo.
   Las «-block-end» (línea de abajo) van aparte porque Radzen las declara en :root
   como var(--rz-input-…-border) y ahí quedan resueltas: redefinir solo el borde
   no las alcanza. Las casillas y radios dibujan su caja con esa misma variable,
   así que con esto también se marcan. */
html .invalid,
html .rz-form-field:has(.invalid){
  --rz-input-border: 1px solid var(--err);
  --rz-input-hover-border: 1px solid var(--err);
  --rz-input-focus-border: 1px solid var(--err);
  --rz-input-border-block-end: 1px solid var(--err);
  --rz-input-hover-border-block-end: 1px solid var(--err);
  --rz-input-focus-border-block-end: 1px solid var(--err);
  --rz-input-focus-shadow: 0 0 0 3px var(--err-bg);
}
html :is(.rz-selectbar, .rz-listbox, .rz-html-editor).invalid,
html .rz-security-code.invalid .rz-security-code-input{border-color:var(--err)}
/* El mensaje ocupa su renglón, debajo del campo. */
html .rz-messages-error{display:block;line-height:1.45}

/* Encabezados de rejilla como versalitas mono (§3.5). */
html .rz-grid-table thead th{font-family:var(--mono);letter-spacing:.14em}

/* Avisos abajo a la derecha (§5.4); de fábrica van arriba. */
html .rz-notification{inset-block-start:auto;inset-block-end:22px;inset-inline-end:22px}


/* ---------------------------------------------------------------------
   4. Chrome translúcido: RadzenHeader lleva class="chrome" (y RadzenSidebar
   también). El desenfoque no tiene variable.
   --------------------------------------------------------------------- */
html .rz-header.chrome{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* El bloque .chrome de app.css le pone al chrome un color sólido (html[data-theme] .chrome,
   que pesa 0,2,1) y le gana a .rz-header de Radzen: el encabezado saldría opaco. Se le
   devuelve su variable translúcida con más peso (0,3,1). La columna sí se queda sólida. */
html[data-theme] .rz-header.chrome{background-color:var(--rz-header-background-color)}


/* ---------------------------------------------------------------------
   5. Riel: el menú se encoge a iconos cambiando el ancho, NO con el
   colapso de Radzen (.rz-sidebar-collapsed pone width:0 !important y
   desaparece la columna). data-menu lo escribe el servidor desde la
   cookie, antes del primer pintado. Las etiquetas se esconden con las
   reglas html[data-menu="rail"] de app.css. Solo de 1024 px para arriba:
   abajo, la columna es cajón y siempre lleva etiquetas.
   --------------------------------------------------------------------- */
@media (min-width: 1024px){
  html[data-menu="rail"]{--sidebar:4.5rem}
}


/* ---------------------------------------------------------------------
   6. Cortes responsivos (ESPECIFICACION.md §5.5). Los de contenido ya
   vienen en app.css; aquí va lo que depende de las piezas de Radzen.

   RadzenSidebar va con Responsive="false". Su modo responsivo tiene el
   corte fijo en 768 px en la hoja compilada (ResponsiveMaxWidth solo
   mueve el JS) y en teléfono empuja el contenido fuera de la pantalla en
   vez de sobreponerse. El cajón lo pone este CSS: el layout lleva la
   clase .menu cuando está abierto, igual que .app.menu en el prototipo,
   y el velo es el mismo <div class="drawer-scrim"> de app.css.

   Dentro de RadzenLayout la página se desplaza en .rz-body, no en la
   ventana: el scroll-padding va ahí.
   --------------------------------------------------------------------- */
html[data-theme]{--rz-header-min-height:64px}
html .rz-layout .rz-body{scroll-padding-top:24px;scroll-padding-bottom:96px}

@media (max-width: 1023.98px){
  html[data-theme]{--rz-header-min-height:56px}
  html .rz-layout .rz-sidebar.chrome{position:fixed;z-index:50;top:56px;bottom:0;left:0;width:min(280px,86vw);opacity:1;
    overflow-y:auto;transform:translateX(-102%);visibility:hidden;transition:transform .25s var(--ease),visibility 0s .25s;
    box-shadow:0 0 60px rgba(0,0,0,.45)}
  html .rz-layout.menu .rz-sidebar.chrome{transform:none;visibility:visible;transition:transform .25s var(--ease)}
  html .rz-layout.menu .drawer-scrim{opacity:1;pointer-events:auto}

  /* Rejilla más densa: letra un punto más chica y celdas que parten
     palabras, para no llegar al scroll horizontal. */
  html[data-theme]{--rz-grid-cell-font-size:13px;--rz-grid-cell-padding:.5rem .625rem}
  html .rz-grid-table td{white-space:normal;overflow-wrap:anywhere}
}