/*
 * LastCheck Design System — Fase 5
 *
 * Tokens + componentes compartidos por todas las páginas (login,
 * dashboard, admin). Se enlaza con <link rel="stylesheet"
 * href="/design-system.css"> — cada página conserva solo el CSS de
 * su propio layout, no de componentes genéricos.
 *
 * Prefijo "lc-" en todas las clases para no chocar con estilos
 * propios de cada página durante la migración.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Le dice al navegador que esto es una interfaz oscura: así pinta en
     oscuro las barras de scroll, los desplegables nativos y los campos
     de formulario. Sin esto salen blancos sobre el fondo negro. */
  color-scheme: dark;

  /* ---- Color: marca (idénticos a los de lastcheck.es — ver
     web/src/app/globals.css del sitio corporativo) ---- */
  --lc-black: #010101;
  --lc-black-soft: #171717;
  --lc-anthracite: #262626;

  --lc-orange-50: #2a1610;
  --lc-orange-100: #3a1d14;
  --lc-orange-200: #5a2d1e;
  --lc-orange: #f05223;
  --lc-orange-dark: #d1420f;
  --lc-orange-darker: #a8350d;
  --lc-orange-soft: #2a1610;
  --lc-orange-ink: #ff8560;

  /* ---- Color: neutros (misma escala que la web corporativa) ---- */
  --lc-bg: #0d0c0b;
  --lc-surface: #1a1816;
  --lc-surface-2: #211d1a;
  --lc-surface-sunken: #141210;
  --lc-border: #413a34;
  --lc-border-strong: #574e46;

  --lc-text: #f6f3f1;
  --lc-text-muted: #a29892;
  --lc-text-faint: #8b817b;
  --lc-text-on-dark: #ffffff;
  --lc-text-on-dark-muted: rgb(255 255 255 / 0.72);

  /* Acción primaria = negro con texto blanco (como en la web); el
     naranja se reserva como acento — logo, foco, enlaces, énfasis
     puntual — nunca como relleno grande. */
  --lc-action-primary-bg: var(--lc-orange);
  --lc-action-primary-bg-hover: var(--lc-orange-dark);
  --lc-action-primary-text: #ffffff;

  /* ---- Color: semántico ---- */
  --lc-green: #58c48b;
  --lc-green-soft: #12261b;
  --lc-green-border: #1e4030;

  --lc-red: #ff7b6f;
  --lc-red-soft: #2e1412;
  --lc-red-border: #4a221e;

  --lc-amber: #e0ac4a;
  --lc-amber-soft: #2a2113;
  --lc-amber-border: #453721;

  --lc-blue: #6ea8fe;
  --lc-blue-soft: #14202f;
  --lc-blue-border: #24374f;

  /* ---- Superficies con nombre por FUNCIÓN, no por color ----
     Existen para que el modo oscuro sea posible. Antes cada pantalla
     escribía #fff o #fafaf8 a mano, y un tema alternativo obligaba a
     repasar cien sitios uno a uno. Con estos tokens se cambian solos. */
  --lc-surface-raised: #1a1816;   /* tarjetas sobre el fondo         */
  --lc-surface-inset:  #141210;   /* cajas hundidas dentro de tarjeta */
  --lc-track:          #292421;   /* raíles de barras y controles     */
  --lc-hairline:       #35302c;   /* separadores muy finos            */
  --lc-hairline-2:     #3d3733;
  --lc-text-soft:      #ddd6d1;   /* etiquetas dentro de tarjetas     */
  --lc-text-dim:       #8b817b;   /* texto auxiliar                   */
  --lc-swatch-empty:   #332e2b;   /* celdas vacías de mapas y barras  */
  --lc-on-accent:      #ffffff;   /* texto sobre relleno naranja      */

  /* ---- Tipografía ---- */
  --lc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --lc-font-mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;

  --lc-text-xs: 0.75rem;
  --lc-text-sm: 0.8125rem;
  --lc-text-base: 0.875rem;
  --lc-text-md: 1rem;
  --lc-text-lg: 1.125rem;
  --lc-text-xl: 1.375rem;
  --lc-text-2xl: 1.75rem;
  --lc-text-3xl: 2.25rem;

  /* ---- Espaciado ---- */
  --lc-space-1: 4px;
  --lc-space-2: 8px;
  --lc-space-3: 12px;
  --lc-space-4: 16px;
  --lc-space-5: 20px;
  --lc-space-6: 24px;
  --lc-space-8: 32px;
  --lc-space-10: 40px;
  --lc-space-12: 48px;
  --lc-space-16: 64px;

  /* ---- Radios y sombras ---- */
  --lc-radius-sm: 8px;
  --lc-radius-md: 16px;
  --lc-radius-lg: 24px;
  --lc-radius-xl: 28px;
  --lc-radius-full: 999px;

  --lc-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --lc-shadow-md: 0 6px 20px rgb(0 0 0 / 0.45);
  --lc-shadow-lg: 0 16px 40px rgb(0 0 0 / 0.5);

  --lc-focus-ring: 0 0 0 3px rgba(240, 82, 35, 0.32);
  --lc-transition: 140ms ease;
}

/* ============================================================
   Un solo modo: oscuro
   ============================================================

   Los paneles se ven SIEMPRE oscuros, no siga el ordenador de cada uno
   la configuración que siga.

   Antes había tres estados —claro, oscuro y automático— y el resultado
   fue peor que cualquiera de ellos: media pantalla quedaba con las
   superficies de un modo y los textos del otro, y en el panel de
   administrador no se leían ni los nombres de los clientes.

   Mantener dos temas obliga a comprobar cada pantalla dos veces, y con
   un producto que todavía cambia a diario eso es una comprobación que
   se salta sola. Un solo tema, bien hecho, se ve bien siempre.

   Los neutros llevan algo de calidez —marrón muy tenue en vez de gris
   puro— para que peguen con el naranja de marca: un gris frío al lado
   del #f05223 se ve sucio.
   ------------------------------------------------------------ */


/* ============================================================
   Base
   ============================================================ */

.lc-root, body {
  font-family: var(--lc-font);
  color: var(--lc-text);
  background: var(--lc-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.lc-root *, .lc-root *::before, .lc-root *::after,
body *, body *::before, body *::after {
  box-sizing: border-box;
}

/* Foco visible consistente en todo el sitio — nunca lo quitamos, solo
   lo sustituimos por uno propio más integrado con la marca. */
:focus-visible {
  outline: none;
  box-shadow: var(--lc-focus-ring);
}

a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .lc-root *, body * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   Atmósfera: manchas de degradado + grano
   (mismo lenguaje visual que lastcheck.es — ver web/src/app/globals.css)
   ============================================================ */

/* Sin `filter: blur()` a propósito: la mancha YA es un degradado radial
   con paradas suaves, así que el desenfoque sería casi redundante pero
   carísimo de pintar (obliga a recomponer una superficie enorme en cada
   frame de scroll). Siempre dentro de un contenedor con
   `position: relative; overflow: hidden`. */
.lc-blob {
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
  z-index: 0;
}

.lc-blob--light {
  background: radial-gradient(
    circle closest-side,
    rgb(240 82 35 / 0.16) 0%,
    rgb(240 82 35 / 0.13) 25%,
    rgb(240 82 35 / 0.08) 45%,
    rgb(240 82 35 / 0.04) 65%,
    rgb(240 82 35 / 0.01) 82%,
    transparent 100%
  );
}

.lc-blob--dark {
  background: radial-gradient(
    circle closest-side,
    rgb(240 82 35 / 0.35) 0%,
    rgb(240 82 35 / 0.26) 25%,
    rgb(240 82 35 / 0.16) 45%,
    rgb(240 82 35 / 0.08) 65%,
    rgb(240 82 35 / 0.02) 82%,
    transparent 100%
  );
}

/* Grano finísimo sobre los degradados: sin él una mancha difuminada se
   ve plana y digital; con textura pasa a leerse como impresión. */
.lc-grain {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Todo lo que deba quedar por encima de la atmósfera. */
.lc-above { position: relative; z-index: 1; }

/* ============================================================
   Entrada escalonada
   ============================================================ */

/* Se dispara al pintar, no con scroll: los paneles cargan sus datos por
   JS y su contenido vive casi todo en la primera pantalla, así que un
   escalonado de entrada da la sensación de calidad sin depender de
   observadores de scroll. Usa --lc-delay para el escalonado. */
@keyframes lc-rise-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.lc-animate-in {
  animation: lc-rise-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--lc-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .lc-animate-in { animation: none; }
}

/* ============================================================
   Tipografía utilitaria
   ============================================================ */

/* Etiqueta de sección en píldora (punto naranja + texto), igual que en
   lastcheck.es. `.lc-eyebrow` a secas sigue existiendo como texto
   plano para donde no encaje la píldora. */
.lc-eyebrow {
  font-size: var(--lc-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lc-text-muted);
}

.lc-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--lc-border-strong);
  border-radius: var(--lc-radius-full);
  font-size: var(--lc-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lc-text-muted);
  background: var(--lc-surface);
}

.lc-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lc-orange);
  flex-shrink: 0;
}

.lc-pill--on-dark {
  border-color: rgb(255 255 255 / 0.16);
  color: var(--lc-text-on-dark-muted);
  background: transparent;
}

.lc-h1 { font-size: var(--lc-text-3xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.lc-h2 { font-size: var(--lc-text-2xl); font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.lc-h3 { font-size: var(--lc-text-lg); font-weight: 700; line-height: 1.25; }
.lc-muted { color: var(--lc-text-muted); }
/* Tamaños de texto como clase. Se escribían en el HTML de las dos
   pantallas de acceso desde el principio —lc-text-base, lc-text-sm— y
   nunca existieron, así que no hacían nada. */
.lc-text-base { font-size: var(--lc-text-base); }
.lc-text-sm { font-size: var(--lc-text-sm); }

/* Un botón que se comporta como enlace: "¿Has olvidado tu contraseña?".
   Sin regla salía como el botón gris que pinta el navegador, encima
   del fondo oscuro de la pantalla de acceso. */
.lc-link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--lc-text-sm);
  font-weight: 600;
  color: var(--lc-text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--lc-transition);
}
.lc-link-button:hover { color: var(--lc-orange); }
.lc-link-button:focus-visible { outline: 2px solid var(--lc-orange); outline-offset: 3px; border-radius: 3px; }
.lc-mono { font-family: var(--lc-font-mono); }

/* ============================================================
   Botones
   ============================================================ */

.lc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lc-space-2);
  height: 44px;
  padding: 0 var(--lc-space-5);
  border-radius: var(--lc-radius-sm);
  border: 1px solid transparent;
  font-family: var(--lc-font);
  font-size: var(--lc-text-base);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--lc-transition), border-color var(--lc-transition), opacity var(--lc-transition), transform var(--lc-transition);
  -webkit-tap-highlight-color: transparent;
}

.lc-btn:hover { opacity: 0.92; }
.lc-btn:active { transform: scale(0.98); }

.lc-btn--sm { height: 34px; padding: 0 var(--lc-space-4); font-size: var(--lc-text-sm); }
.lc-btn--block { width: 100%; }

/* Acción primaria: píldora negra que pasa a naranja de marca al pasar
   el ratón, igual que el "Acceso clientes" de lastcheck.es. El negro le
   da más peso que un naranja plano, y reserva el naranja para el gesto. */
.lc-btn--primary {
  background: var(--lc-action-primary-bg);
  color: var(--lc-action-primary-text);
  border-radius: var(--lc-radius-full);
  box-shadow: var(--lc-shadow-sm);
}
.lc-btn--primary:hover {
  background: var(--lc-orange);
  color: var(--lc-black);
  opacity: 1;
}

.lc-btn--secondary {
  background: var(--lc-surface);
  color: var(--lc-text);
  border-color: var(--lc-border-strong);
  border-radius: var(--lc-radius-full);
}
.lc-btn--secondary:hover { border-color: var(--lc-black); background: var(--lc-surface-2); opacity: 1; }

/* Flecha que avanza al pasar el ratón — se pone dentro del botón:
   <button class="lc-btn lc-btn--primary">Texto <span class="lc-btn-arrow">→</span></button> */
.lc-btn-arrow {
  display: inline-block;
  transition: transform var(--lc-transition);
}
.lc-btn:hover .lc-btn-arrow { transform: translateX(3px); }

/* Píldora de navegación: cada enlace se lee como una pieza propia, no
   como texto corrido. */
.lc-btn--nav {
  height: 36px;
  padding: 0 var(--lc-space-4);
  border-radius: var(--lc-radius-full);
  background: transparent;
  border-color: var(--lc-border);
  color: var(--lc-text-muted);
  font-weight: 600;
}
.lc-btn--nav:hover { border-color: var(--lc-border-strong); background: var(--lc-surface-2); color: var(--lc-text); opacity: 1; }
.lc-btn--nav.is-active { border-color: var(--lc-black); background: var(--lc-black); color: white; }

.lc-btn--ghost { background: transparent; color: var(--lc-text-muted); border-color: transparent; }
.lc-btn--ghost:hover { background: var(--lc-surface-sunken); color: var(--lc-text); opacity: 1; }

.lc-btn--danger { background: var(--lc-red-soft); color: var(--lc-red); border-color: var(--lc-red-border); }
.lc-btn--danger:hover { background: var(--lc-red); color: white; border-color: var(--lc-red); opacity: 1; }

.lc-btn--on-dark { background: rgba(255,255,255,0.08); color: var(--lc-text-on-dark); border-color: rgba(255,255,255,0.16); }
.lc-btn--on-dark:hover { border-color: var(--lc-orange); color: var(--lc-orange); opacity: 1; }

.lc-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; pointer-events: none; }

/* ============================================================
   Formularios
   ============================================================ */

.lc-field { display: flex; flex-direction: column; gap: var(--lc-space-2); }
.lc-field + .lc-field { margin-top: var(--lc-space-5); }

.lc-label { font-size: var(--lc-text-sm); font-weight: 700; color: var(--lc-text); }
.lc-label--optional::after { content: " (opcional)"; font-weight: 500; color: var(--lc-text-faint); }

.lc-input, .lc-select, .lc-textarea {
  width: 100%;
  height: 44px;
  padding: 0 var(--lc-space-4);
  border: 1px solid var(--lc-border-strong);
  border-radius: var(--lc-radius-sm);
  background: var(--lc-surface);
  font-family: var(--lc-font);
  font-size: var(--lc-text-base);
  color: var(--lc-text);
  transition: border-color var(--lc-transition), box-shadow var(--lc-transition);
}

.lc-textarea { height: auto; min-height: 96px; padding: var(--lc-space-3) var(--lc-space-4); resize: vertical; }

.lc-input::placeholder, .lc-textarea::placeholder { color: var(--lc-text-faint); }

.lc-input:hover, .lc-select:hover, .lc-textarea:hover { border-color: var(--lc-text-faint); }

.lc-input:focus, .lc-select:focus, .lc-textarea:focus {
  outline: none;
  border-color: var(--lc-orange);
  box-shadow: var(--lc-focus-ring);
}

.lc-input[aria-invalid="true"], .lc-select[aria-invalid="true"] {
  border-color: var(--lc-red);
}
.lc-input[aria-invalid="true"]:focus, .lc-select[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(200, 52, 47, 0.18);
}

.lc-helper { font-size: var(--lc-text-xs); color: var(--lc-text-faint); line-height: 1.5; }
.lc-error-text { font-size: var(--lc-text-xs); color: var(--lc-red); font-weight: 600; display: flex; align-items: center; gap: 6px; }

.lc-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b6b6e'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.lc-checkbox-row { display: flex; align-items: center; gap: var(--lc-space-2); font-size: var(--lc-text-sm); }
.lc-checkbox-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--lc-orange); }

/* ============================================================
   Cards
   ============================================================ */

.lc-card {
  background: var(--lc-surface);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-lg);
  box-shadow: var(--lc-shadow-sm);
}

.lc-card--padded { padding: var(--lc-space-6); }
.lc-card--elevated { box-shadow: var(--lc-shadow-md); }

.lc-card--interactive {
  transition: transform var(--lc-transition), box-shadow var(--lc-transition), border-color var(--lc-transition);
}
.lc-card--interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--lc-shadow-lg);
  border-color: var(--lc-border-strong);
}

/* Aquí vivía .lc-focus-grid, que desenfocaba las tarjetas sobre las
   que no estaba el ratón. Se ha eliminado en vez de dejarla sin usar:
   el único sitio donde estaba puesta era la rejilla de métricas del
   portal, y ahí hacía daño — son números que se leen comparándolos, y
   el efecto ocultaba tres de los cuatro. Dejarla disponible era invitar
   a volver a ponerla. */


/* Tarjeta de métrica: cifra grande, etiqueta pequeña. */
.lc-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lc-stat-label { font-size: var(--lc-text-xs); color: var(--lc-text-muted); font-weight: 600; }
.lc-stat-value { font-size: var(--lc-text-2xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.lc-stat-hint { font-size: var(--lc-text-xs); color: var(--lc-text-faint); }

/* ============================================================
   Panel oscuro tipo "mockup" — el mismo de la sección Impact de
   lastcheck.es: cabecera de ventana, cifras grandes y barras naranjas.
   ============================================================ */

.lc-panel {
  position: relative;
  overflow: hidden;
  background: var(--lc-black);
  color: var(--lc-text-on-dark);
  border-radius: var(--lc-radius-lg);
  padding: var(--lc-space-6);
  box-shadow: var(--lc-shadow-md);
}

/* Los tres puntos de ventana. Decorativos. */
.lc-panel-dots { display: flex; gap: 6px; margin-bottom: var(--lc-space-5); position: relative; z-index: 1; }
.lc-panel-dots span { width: 10px; height: 10px; border-radius: 50%; display: block; }
.lc-panel-dots span:nth-child(1) { background: #ff5f57; }
.lc-panel-dots span:nth-child(2) { background: #febc2e; }
.lc-panel-dots span:nth-child(3) { background: #28c840; }

.lc-panel-body { position: relative; z-index: 1; }

.lc-panel-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--lc-space-5);
}

.lc-panel-stat-label { font-size: var(--lc-text-xs); color: var(--lc-text-on-dark-muted); font-weight: 600; }
.lc-panel-stat-value {
  margin-top: 4px;
  font-size: var(--lc-text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums; /* evita que el ancho baile al contar */
}

/* Barras: crecen desde abajo al aparecer, escalonadas. */
.lc-panel-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 120px;
  margin-top: var(--lc-space-6);
}

.lc-panel-bars > span {
  flex: 1;
  background: var(--lc-orange);
  border-radius: 6px 6px 0 0;
  transform-origin: bottom;
  animation: lc-bar-grow 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--lc-delay, 0ms);
}

@keyframes lc-bar-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .lc-panel-bars > span { animation: none; }
}

/* ============================================================
   Badges / estados
   ============================================================ */

.lc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--lc-radius-full);
  font-size: var(--lc-text-xs);
  font-weight: 800;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  line-height: 1.4;
}

.lc-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.lc-badge--success { background: var(--lc-green-soft); color: var(--lc-green); border-color: var(--lc-green-border); }
.lc-badge--danger { background: var(--lc-red-soft); color: var(--lc-red); border-color: var(--lc-red-border); }
.lc-badge--warning { background: var(--lc-amber-soft); color: var(--lc-amber); border-color: var(--lc-amber-border); }
.lc-badge--info { background: var(--lc-blue-soft); color: var(--lc-blue); border-color: var(--lc-blue-border); }
.lc-badge--neutral { background: var(--lc-surface-sunken); color: var(--lc-text-muted); border-color: var(--lc-border); }

/* ============================================================
   Tablas
   ============================================================ */

.lc-table-wrap { overflow-x: auto; }

.lc-table { width: 100%; border-collapse: collapse; font-size: var(--lc-text-base); }

.lc-table th {
  text-align: left;
  font-size: var(--lc-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--lc-text-muted);
  padding: var(--lc-space-3) var(--lc-space-4);
  background: var(--lc-surface-2);
  border-bottom: 1px solid var(--lc-border);
  white-space: nowrap;
}

.lc-table td {
  padding: var(--lc-space-4);
  border-bottom: 1px solid var(--lc-border);
  vertical-align: middle;
}

.lc-table tbody tr:last-child td { border-bottom: none; }
.lc-table tbody tr:hover td { background: var(--lc-surface-2); }

.lc-table-title { font-weight: 700; color: var(--lc-text); }
.lc-table-sub { font-family: var(--lc-font-mono); font-size: var(--lc-text-xs); color: var(--lc-text-muted); margin-top: 2px; }

/* ============================================================
   Alertas / banners
   ============================================================ */

.lc-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--lc-space-3);
  padding: var(--lc-space-4) var(--lc-space-5);
  border-radius: var(--lc-radius-md);
  border: 1px solid transparent;
  font-size: var(--lc-text-sm);
  line-height: 1.55;
}

.lc-alert-icon { font-size: 16px; line-height: 1.4; flex-shrink: 0; }
.lc-alert-title { font-weight: 700; margin-bottom: 2px; }

.lc-alert--info { background: var(--lc-blue-soft); border-color: var(--lc-blue-border); color: var(--lc-blue); }
.lc-alert--success { background: var(--lc-green-soft); border-color: var(--lc-green-border); color: var(--lc-green); }
.lc-alert--error { background: var(--lc-red-soft); border-color: var(--lc-red-border); color: var(--lc-red); }
.lc-alert--warning { background: var(--lc-amber-soft); border-color: var(--lc-amber-border); color: var(--lc-amber); }

/* ============================================================
   Estados vacíos / carga / error
   ============================================================ */

.lc-empty {
  text-align: center;
  padding: var(--lc-space-12) var(--lc-space-6);
  color: var(--lc-text-muted);
}

.lc-empty-icon { font-size: 26px; margin-bottom: var(--lc-space-3); opacity: 0.7; }
.lc-empty-title { font-size: var(--lc-text-md); font-weight: 700; color: var(--lc-text); margin-bottom: 6px; }
.lc-empty-text { font-size: var(--lc-text-sm); max-width: 42ch; margin: 0 auto; line-height: 1.6; }

.lc-skeleton {
  background: linear-gradient(90deg, var(--lc-surface-sunken) 25%, #e9e9e5 37%, var(--lc-surface-sunken) 63%);
  background-size: 400% 100%;
  animation: lc-skeleton-shine 1.4s ease infinite;
  border-radius: var(--lc-radius-sm);
}

@keyframes lc-skeleton-shine {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .lc-skeleton { animation: none; background: var(--lc-surface-sunken); }
}

/* ============================================================
   Navegación: header oscuro + sidebar (admin)
   ============================================================ */

.lc-topbar {
  height: 68px;
  background: var(--lc-black);
  color: var(--lc-text-on-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--lc-space-8);
  gap: var(--lc-space-4);
  flex-wrap: wrap;
}

.lc-brand { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.lc-brand-accent { color: var(--lc-orange); }

.lc-brand-mark {
  width: 30px; height: 30px;
  border: 2.5px solid var(--lc-orange);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.lc-brand-mark::before {
  content: "";
  position: absolute;
  width: 12px; height: 6px;
  border-left: 2.5px solid var(--lc-orange);
  border-bottom: 2.5px solid var(--lc-orange);
  transform: rotate(-45deg);
  left: 7px; top: 8px;
}

.lc-sidebar {
  background: var(--lc-black);
  color: var(--lc-text-on-dark-muted);
  display: flex;
  flex-direction: column;
  padding: var(--lc-space-5) var(--lc-space-3);
}

.lc-nav-section-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #6f6f73;
  padding: var(--lc-space-4) var(--lc-space-3) var(--lc-space-2);
}

.lc-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--lc-radius-sm);
  font-size: var(--lc-text-base);
  font-weight: 600;
  color: #c7c7ca;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--lc-transition), color var(--lc-transition);
}

.lc-nav-link:hover { background: rgba(255,255,255,0.06); color: white; }
.lc-nav-link.is-active { background: var(--lc-orange); color: white; }

/* ============================================================
   Breadcrumbs
   ============================================================ */

.lc-breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: var(--lc-text-sm); color: var(--lc-text-muted); margin-bottom: var(--lc-space-5); flex-wrap: wrap; }
.lc-breadcrumbs a { color: var(--lc-text-muted); text-decoration: none; font-weight: 600; }
.lc-breadcrumbs a:hover { color: var(--lc-orange); }
.lc-breadcrumbs .lc-crumb-sep { color: var(--lc-text-faint); }
.lc-breadcrumbs .lc-crumb-current { color: var(--lc-text); font-weight: 700; }

/* ============================================================
   Utilidades de accesibilidad
   ============================================================ */

.lc-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.lc-skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--lc-orange);
  color: white;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  font-weight: 700;
  font-size: var(--lc-text-sm);
  z-index: 100;
}

.lc-skip-link:focus { left: 0; }