/* Tema Pymes — layout propio construido sobre los tokens/componentes de industry.css (nunca valores
   sueltos: todo color/tipo/espacio sale de las variables --color-*, --font-*, --space-*). Cubre lo
   que la plantilla de diseno no trae armado: la caja de login, y el shell autenticado (sidebar
   acordeon + topbar) que reemplaza el sidebar siempre-expandido de la plantilla 2a. */

/* — login — */
.login-pantalla {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--space-4); background: var(--color-bg);
}
.login-caja {
  width: min(380px, 100%); padding: var(--space-8) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.login-marca {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  margin-bottom: var(--space-4); text-align: center;
}
.login-marca .marca-img { width: 40px; height: 40px; object-fit: contain; }
.login-marca .nombre { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; }
.alerta-error {
  padding: var(--space-2) var(--space-3); font-size: 13px; border-radius: var(--radius-md);
  background: var(--color-danger-tint);
  border: 1px solid color-mix(in srgb, var(--color-danger) 45%, transparent);
  color: var(--color-danger-text);
}
.alerta-advertencia {
  padding: var(--space-3); font-size: 13px; border-radius: var(--radius-md);
  background: var(--color-warning-tint);
  border: 1px solid color-mix(in srgb, var(--color-warning) 45%, transparent);
  color: var(--color-warning-text);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2);
}
/* Banner de confirmacion (ej. "clave reiniciada") - mismo patron visual que .alerta-error/
   .alerta-advertencia, con los tokens de acento (verde) en vez de peligro/advertencia. */
.alerta-exito {
  padding: var(--space-2) var(--space-3); font-size: 13px; border-radius: var(--radius-md);
  background: var(--color-accent-100);
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  color: var(--color-accent-800);
}

/* Boton "Probar la demo" del login - fondo naranja (accent-2) a proposito para que no se confunda
   con "Ingresar" (accent verde, btn-primary) - pedido explicito de Carlos. */
.btn-demo { background: var(--color-accent-2); color: var(--color-bg); border-color: transparent; }
.btn-demo:hover { background: var(--color-accent-2-700); }
.btn-demo:active { background: var(--color-accent-2-800); }

/* — shell autenticado — */
:root { --sidebar-w: 56px; --sidebar-w-abierto: 320px; --topbar-h: 58px; }

.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
  width: var(--sidebar-w); overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--color-bg); border-right: 1px solid var(--color-divider);
  transition: width 0.16s ease, box-shadow 0.16s ease;
}
.sidebar:hover, .sidebar:focus-within {
  width: var(--sidebar-w-abierto);
  box-shadow: var(--shadow-lg);
}

.sidebar-marca {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-3) 12px;
  white-space: nowrap; flex: none;
}
.sidebar-marca .marca-img { width: 32px; height: 32px; flex: none; object-fit: contain; }
.sidebar-marca .texto { display: flex; flex-direction: column; line-height: 1.2; }
.sidebar-marca .texto .nombre { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px; }
.sidebar-marca .texto .empresa { font-size: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
/* Los links de superadmin ("Elegir empresa"/"Administrar clientes") reusan la clase .empresa pero
   como <a>, no <div> - letra mas grande + separacion entre ambos para que no queden pegados y sea
   facil hacer click en el correcto (pedido explicito de Carlos, se confundia entre los dos). */
.sidebar-marca .texto a.empresa { font-size: 13px; display: block; }
.sidebar-marca .texto a.empresa + a.empresa { margin-top: 6px; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) 0; flex: 1; overflow-y: auto; overflow-x: hidden; }
.sidebar-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 8px 0 8px 12px; white-space: nowrap; text-decoration: none; color: var(--color-text);
}
.sidebar-item:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.sidebar-item.activo { background: var(--color-accent-100); color: var(--color-accent-800); }
.sidebar-item .chip {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent); border-radius: var(--radius-md);
}
.sidebar-item.activo .chip { color: var(--color-accent-800); }
/* white-space:normal (pisa el nowrap heredado de .sidebar-item) para que un nombre de modulo largo
   (ej. "Trabajos o Proyectos por Completar") pase a una segunda linea en vez de cortarse contra el
   overflow-x:hidden del nav - se veian 2 opciones truncadas a mitad de palabra. */
.sidebar-item .nombre { font-size: 14px; white-space: normal; line-height: 1.25; }
.sidebar-item.deshabilitado { opacity: 0.55; cursor: default; }

.sidebar-footer {
  flex: none; padding: var(--space-3) 0 var(--space-4) 12px;
  border-top: 1px solid var(--color-divider); display: flex; flex-direction: column; gap: var(--space-2);
}
.sidebar-usuario { display: flex; align-items: center; gap: var(--space-3); white-space: nowrap; }
.sidebar-usuario .avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-accent-100); color: var(--color-accent-800);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 13px;
}
.sidebar-usuario .texto { display: flex; flex-direction: column; line-height: 1.2; }
.sidebar-usuario .texto .nombre { font-size: 13px; font-weight: 500; }
.sidebar-usuario .texto .rol { font-size: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.sidebar-salir { font-size: 13px; color: var(--color-accent); text-decoration: none; white-space: nowrap; }
.sidebar-salir:hover { color: var(--color-accent-700); }

.sidebar-fondo { display: none; }

.main-shell { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 10; height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-4); background: var(--color-bg); border-bottom: 1px solid var(--color-divider);
}
.topbar h1 { margin: 0; font-size: 20px; }
.btn-menu-movil { display: none; }

.content { flex: 1; padding: var(--space-6) var(--space-6) var(--space-8); }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.modulos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }

/* Tarjetas de "Marcar asistencia" (Asistencia.cshtml): auto-fill en vez de un numero fijo de
   columnas - cada tarjeta nunca baja de 280px, así que el navegador solo mismo decide cuantas
   caben por fila (varias en escritorio, una sola en movil) sin necesitar breakpoints a mano. */
.asistencia-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); }

/* Franja de acento (naranja oxido) al marco izquierdo de cada tarjeta de indicador/modulo - pedido
   explicito de Carlos tras aprobar la paleta "Ficha de Taller", igual tratamiento que las tarjetas
   KPI de esa propuesta. Se aplica via las clases contenedoras (no .card suelto) para no afectar
   otros usos de .card (listados, formularios, dialogos). */
.kpi-grid .card, .modulos-grid .card { border-left: 3px solid var(--color-accent-2); }

/* — barra de filtros (ej. busqueda de Caja Menuda): una sola fila en escritorio. Como el elemento
     lleva class="card" (que en industry.css es flex-direction:column), esta regla fija
     flex-direction:row explicitamente - de lo contrario align-items:flex-end en un contenedor
     column empuja cada campo a la derecha y en su propia linea, en vez de una fila. — */
.filtro-caja { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-end; gap: var(--space-3); }
.filtro-caja .field { flex: 1 1 0; min-width: 0; }
.filtro-caja .field.campo-codigo { flex: 2 1 0; }
.filtro-caja .btn { flex: none; }

@media (max-width: 640px) {
  .filtro-caja { flex-direction: column; align-items: stretch; }
}

/* — dialogo sin JS: el backdrop es el destino de un ancla (#id), :target lo muestra, un link a "#"
     lo cierra. Mismo truco en cualquier pantalla que necesite un modal simple sin cablear JS. — */
.dialog-target { display: none; }
.dialog-target:target { display: grid; }

@media (max-width: 860px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .modulos-grid { grid-template-columns: 1fr; }
}

/* — sidebar movil: rail acordeon por hover no sirve sin mouse; se convierte en panel completo que
     entra/sale con boton hamburguesa (mismo patron que obraviva-ui.js/ObraViva _Layout). — */
@media (max-width: 768px) {
  .sidebar { width: var(--sidebar-w-abierto); transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: none; }
  .sidebar.abierto { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .main-shell { margin-left: 0; }
  .btn-menu-movil { display: inline-flex; }
  .sidebar-fondo {
    display: none; position: fixed; inset: 0; z-index: 30;
    background: color-mix(in srgb, var(--color-neutral-900) 45%, transparent);
  }
  .sidebar-fondo.visible { display: block; }
}

/* — Centro de Ayuda (/Ayuda) — */
.ayuda-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.ayuda-hub-card {
  padding: 20px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: var(--space-2);
  border-left: 3px solid var(--color-accent-2);
}

/* Tabla de contenido del articulo: lista simple de anclas, sin JS - el navegador ya sabe saltar a
   #id al hacer click. Sticky en escritorio para que siga visible mientras se hace scroll del
   articulo largo. */
.ayuda-toc { flex: none; width: 220px; position: sticky; top: calc(var(--topbar-h) + var(--space-4)); }
.ayuda-toc ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ayuda-toc a { color: var(--color-text); text-decoration: none; font-size: 13px; }
.ayuda-toc a:hover { color: var(--color-accent); }

/* Cuerpo del articulo (HTML generado por Markdig desde Contenido/Ayuda/*.md) - ancho de lectura
   fijo, tipografia comoda, y estilos para lo que el markdown de estos articulos realmente usa:
   encabezados de seccion (##), pasos numerados (listas ordenadas), notas/advertencias
   (blockquote), e imagenes de captura de pantalla. */
.ayuda-articulo { flex: 1 1 480px; min-width: 0; max-width: 720px; line-height: 1.65; }
.ayuda-articulo h2 { font-size: 22px; margin: var(--space-8) 0 var(--space-3); scroll-margin-top: calc(var(--topbar-h) + var(--space-3)); }
.ayuda-articulo h2:first-child { margin-top: 0; }
.ayuda-articulo h3 { font-size: 16px; margin: var(--space-6) 0 var(--space-2); }
.ayuda-articulo ol { padding-left: 0; margin: 0 0 var(--space-4); list-style: none; counter-reset: paso; display: flex; flex-direction: column; gap: var(--space-3); }
.ayuda-articulo ol > li {
  counter-increment: paso; padding-left: 36px; position: relative;
}
.ayuda-articulo ol > li::before {
  content: counter(paso); position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border-radius: 50%; background: var(--color-accent-100); color: var(--color-accent-800);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 12px;
  display: grid; place-items: center;
}
.ayuda-articulo ul { margin: 0 0 var(--space-4); padding-left: 20px; }
.ayuda-articulo blockquote {
  margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--color-warning-tint); border-left: 3px solid var(--color-warning);
  color: var(--color-warning-text); font-size: 13.5px;
}
.ayuda-articulo blockquote p:last-child { margin-bottom: 0; }
/* max-height evita que una captura vertical (ej. un modal angosto y alto) domine la pantalla -
   con solo max-width, una imagen angosta se muestra a su tamaño real sin limite de alto. */
.ayuda-articulo img { display: block; max-width: 100%; max-height: 65vh; width: auto; height: auto; border-radius: var(--radius-md); border: 1px solid var(--color-divider); box-shadow: var(--shadow-sm); margin: 0 0 var(--space-2); }
.ayuda-articulo code { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-surface-2); padding: 1px 5px; border-radius: var(--radius-sm); }

@media (max-width: 860px) {
  .ayuda-hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ayuda-hub-grid { grid-template-columns: 1fr; }
  .ayuda-toc { position: static; width: auto; }
}

/* — campos obligatorios — asterisco rojo en la etiqueta de todo .field cuyo control tiene
   "required" (regla de Carlos: el usuario debe saber que es obligatorio ANTES de enviar). Se
   resuelve aca con :has() para no tener que tocar cada pantalla a mano. */
.field:has(input[required]:not([type="hidden"]), select[required], textarea[required]) > label::after {
  content: " *"; color: var(--color-danger); font-weight: 700;
}