/* erp.css — Hojas de componentes copiadas del ERP (Layout, Components, cards, Forms, Tables, Modal). Los valores salen de tokens.css. */
/* src/styles/Layout.css — Base de layout y jerarquía tipográfica */

/* ── BASE DE DOCUMENTO ────────────────────────────────────────── */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  /* Red de seguridad: evita que la página se pueda arrastrar
     lateralmente si algún elemento se desborda por error.
     Se usa `clip` en vez de `hidden`: `hidden` fuerza a que
     overflow-y compute a `auto` (regla del spec de CSS), lo que
     convierte a <body> en su propio contenedor de scroll y rompe
     `position: sticky` en cualquier parte de la app (ej. el índice
     lateral de la Guía). `clip` recorta igual mens que `hidden`, sin
     ese efecto secundario. */
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  background-color: var(--surface-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.dark-mode-active {
  background-color: var(--surface-page);
  color: var(--text-primary);
}

.App {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: transparent;
}

/* ── CONTENEDORES DE PÁGINA ───────────────────────────────────── */
.page-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-5);
  width: 100%;
}

.page-container-sm {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-5);
  width: 100%;
}

/* ── GRID ESTÁNDAR ────────────────────────────────────────────── */
.modern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-7);
  width: 100%;
}

@media (max-width: 768px) {
  .modern-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .page-container,
  .page-container-sm {
    padding: var(--space-6) var(--space-4);
  }
}

/* ── JERARQUÍA TIPOGRÁFICA ────────────────────────────────────── */

/* Display — encabezados de landing/hero */
.text-display {
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* Títulos de página (H1 semántico) */
h1,
.page-title {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary-700);
  margin-bottom: var(--space-2);
}

/* Subtítulos de sección (H2) */
h2,
.section-heading {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

/* Títulos de panel / card (H3) */
h3,
.panel-title {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

/* Encabezados menores */
h4 { font-size: var(--text-lg);  font-weight: var(--weight-semibold); color: var(--text-primary); }
h5 { font-size: var(--text-md);  font-weight: var(--weight-semibold); color: var(--text-secondary); }
h6 { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-secondary); }

/* Texto base */
p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

p:last-child { margin-bottom: 0; }

/* Labels semánticos */
label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

/* Texto auxiliar / captions */
.text-caption,
.text-aux {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: var(--leading-normal);
}

/* Texto de tabla */
.text-table {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
}

/* Etiquetas de tabla (th) */
.text-table-head {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* Texto de botones */
.text-btn {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}

/* ── DARK MODE — TIPOGRAFÍA ────────────────────────────────────── */
.dark-mode-active h1,
.dark-mode-active .page-title {
  color: var(--color-secondary-400);
}

.dark-mode-active h2,
.dark-mode-active h3,
.dark-mode-active h4 {
  color: var(--text-primary);
}

.dark-mode-active p {
  color: var(--text-secondary);
}

/* ── UTILIDADES DE TEXTO ──────────────────────────────────────── */
.text-muted,
.text-muted-foreground {
  color: var(--text-secondary) !important;
}

/* Subtítulos/leyendas pequeñas bajo un título o un valor (stats, cards de
   proyecto...). Usa el token de texto secundario -no tertiary- para que siga
   siendo legible en modo claro; se ajusta solo en modo oscuro vía el token. */
.text-caption {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
}

/* .text-tertiary: se usa como clase plana en ~40 archivos asumiendo que
   Tailwind la generaba (como hace con text-primary/text-secondary, que sí
   son colores de marca en tailwind.config.js). "tertiary" nunca se declaró
   ahí, así que esta clase no existía y el texto quedaba sin colorear. */
.text-tertiary {
  color: var(--text-tertiary);
}

.dark-mode-active .text-muted,
.dark-mode-active .text-muted-foreground {
  color: var(--text-secondary) !important;
}

.dark-mode-active .dark-mode-text {
  color: var(--text-primary);
}

.dark-mode-active .dark-mode-title {
  color: var(--color-secondary-400);
}

/* ── DIVISORES ────────────────────────────────────────────────── */
hr {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: var(--space-6) 0;
}

.dark-mode-active hr {
  border-top-color: var(--border-subtle);
}

/* ── OVERLINE / EYEBROW ───────────────────────────────────────── */
.overline {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary-500);
}

.dark-mode-active .overline {
  color: var(--color-secondary-400);
}
/* src/styles/Components.css — Componentes reutilizables del sistema */

/* ══════════════════════════════════════════════════════════════
   BOTONES
══════════════════════════════════════════════════════════════ */

/* Base compartida de todos los botones */
.cta-button,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.625rem var(--space-6);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}

.cta-button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.btn-danger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Botón primario — morado corporativo, acciones principales.
   Color de texto fijo en #fff (NO --text-inverse): el fondo es siempre
   el morado corporativo en ambos temas, --text-inverse en cambio se
   invierte en modo oscuro (queda casi negro) y volvía el texto ilegible
   sobre el morado. */
.cta-button,
.btn-primary {
  background-color: var(--color-primary-500);
  color: #fff;
  border-color: var(--color-primary-500);
}

.cta-button:hover,
.btn-primary:hover {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(89, 37, 130, 0.28);
}

.cta-button:active,
.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Botón secundario — dorado ámbar, acciones secundarias */
.btn-secondary {
  background-color: var(--color-secondary-500);
  color: var(--color-neutral-900);
  border-color: var(--color-secondary-500);
}

.btn-secondary:hover {
  background-color: var(--color-secondary-600);
  border-color: var(--color-secondary-600);
  color: var(--color-neutral-900);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(221, 156, 56, 0.30);
}

/* Botón fantasma — acción terciaria discreta */
.btn-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-secondary);
}

.btn-ghost:hover {
  background-color: var(--hover-overlay);
  border-color: var(--border-strong);
  color: var(--text-primary);
  text-decoration: none;
}

/* Botón de peligro */
.btn-danger {
  background-color: var(--color-error);
  color: white;
  border-color: var(--color-error);
}

.btn-danger:hover {
  background-color: #b91c1c;
  transform: translateY(-1px);
}

/* Variante ancho completo */
.btn-block {
  width: 100%;
}

/* Estado deshabilitado */
.cta-button:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Dark mode — botones */
.dark-mode-active .btn-ghost {
  border-color: var(--border-default);
  color: var(--text-secondary);
}

.dark-mode-active .btn-ghost:hover {
  background-color: var(--hover-overlay);
  color: var(--text-primary);
}

/* ══════════════════════════════════════════════════════════════
   BADGES / ETIQUETAS DE ESTADO
══════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: 1.4;
}

/* Semáforo de estados */
.badge-pending {
  background: rgba(217, 119, 6, 0.10);
  color: #b45309;
  border: 1px solid rgba(217, 119, 6, 0.20);
}

.badge-approved {
  background: var(--color-success-light);
  color: #a26c1e;
  border: 1px solid rgba(221,156,56, 0.20);
}

.badge-rejected {
  background: var(--color-error-light);
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, 0.20);
}

.badge-info {
  background: var(--color-info-light);
  color: #3a1554;
  border: 1px solid rgba(89,37,130, 0.20);
}

.badge-neutral {
  background: var(--color-neutral-100);
  color: var(--color-neutral-700);
  border: 1px solid var(--color-neutral-200);
}

/* Alias — varias pantallas usan estos nombres en vez de los canónicos
   (approved/rejected/neutral). Sin esto quedaban sin color/fondo (caja
   vacía con texto por defecto, invisible en modo oscuro). */
.badge-success { background: var(--color-success-light); color: #a26c1e; border: 1px solid rgba(221,156,56, 0.20); }
.badge-error   { background: var(--color-error-light); color: #b91c1c; border: 1px solid rgba(220, 38, 38, 0.20); }
.badge-default { background: var(--color-neutral-100); color: var(--color-neutral-700); border: 1px solid var(--color-neutral-200); }
.dark-mode-active .badge-success { background: rgba(221,156,56, 0.15); color: #e4a95a; border-color: rgba(221,156,56, 0.25); }
.dark-mode-active .badge-error   { background: rgba(220, 38, 38, 0.15); color: #f87171; border-color: rgba(220, 38, 38, 0.25); }
.dark-mode-active .badge-default { background: var(--surface-raised); color: var(--text-secondary); border-color: var(--border-default); }

/* inv-badge: alias del layout base de .badge usado en el módulo de
   inventario (misma forma; el color lo aporta la clase de estado). */
.inv-badge { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-bold); padding: 3px var(--space-3); border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: var(--tracking-wide); line-height: 1.4; }

/* Badges de rol — definidos aquí porque badge-purple/warning/primary
   no son utilidades de Tailwind, son clases propias del sistema */
.badge-purple {
  background: rgba(89, 37, 130, 0.10);
  color: #4a1d6b;
  border: 1px solid rgba(89, 37, 130, 0.22);
}

.badge-warning {
  background: rgba(217, 119, 6, 0.10);
  color: #92400e;
  border: 1px solid rgba(217, 119, 6, 0.22);
}

.badge-primary {
  background: rgba(29, 78, 216, 0.10);
  color: #3a1554;
  border: 1px solid rgba(29, 78, 216, 0.22);
}

/* Dark mode badges */
.dark-mode-active .badge-purple {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  border-color: rgba(139, 92, 246, 0.28);
}

.dark-mode-active .badge-warning {
  background: rgba(221, 156, 56, 0.15);
  color: #fbbf24;
  border-color: rgba(221, 156, 56, 0.28);
}

.dark-mode-active .badge-primary {
  background: rgba(59, 130, 246, 0.15);
  color: #d0aaeb;
  border-color: rgba(59, 130, 246, 0.28);
}

/* Dark mode badges */
.dark-mode-active .badge-pending {
  background: rgba(217, 119, 6, 0.15);
  color: #fbbf24;
  border-color: rgba(217, 119, 6, 0.25);
}

.dark-mode-active .badge-approved {
  background: rgba(221,156,56, 0.15);
  color: #e4a95a;
  border-color: rgba(221,156,56, 0.25);
}

.dark-mode-active .badge-rejected {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
  border-color: rgba(220, 38, 38, 0.25);
}

.dark-mode-active .badge-info {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  border-color: rgba(139, 92, 246, 0.28);
}

.dark-mode-active .badge-neutral {
  background: var(--surface-raised);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

/* Botones de acción dentro de tabla (Desactivar / Activar) */
.tbl-action-danger {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  border: 1px solid #b91c1c;
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.tbl-action-danger:hover {
  background: #b91c1c;
  color: #ffffff;
}

.tbl-action-success {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  border: 1px solid #a26c1e;
  background: rgba(221,156,56, 0.08);
  color: #a26c1e;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.tbl-action-success:hover {
  background: #a26c1e;
  color: #ffffff;
}

.dark-mode-active .tbl-action-danger {
  border-color: #f87171;
  background: rgba(248, 113, 113, 0.08);
  color: #f87171;
}

.dark-mode-active .tbl-action-danger:hover {
  background: rgba(248, 113, 113, 0.20);
  color: #fca5a5;
}

.dark-mode-active .tbl-action-success {
  border-color: #e4a95a;
  background: rgba(74, 222, 128, 0.08);
  color: #e4a95a;
}

.dark-mode-active .tbl-action-success:hover {
  background: rgba(74, 222, 128, 0.20);
  color: #f5dbb9;
}

/* ══════════════════════════════════════════════════════════════
   TABS
══════════════════════════════════════════════════════════════ */

.tab-container {
  display: flex;
  background: var(--surface-sunken);
  padding: 3px;
  border-radius: var(--radius-lg);
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--border-subtle);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 1;
  /* Sombra de scroll: revela que hay más pestañas al deslizar,
     ya que el scrollbar nativo está oculto arriba. Los dos
     gradientes "viajan" con el contenido (background-attachment:
     local) y solo son visibles cuando hay más que scrollear en
     esa dirección — sin JS. */
  background-image:
    linear-gradient(to right, var(--surface-sunken) 30%, rgba(0,0,0,0)),
    linear-gradient(to left, var(--surface-sunken) 30%, rgba(0,0,0,0)),
    linear-gradient(to right, rgba(0,0,0,0.12), rgba(0,0,0,0) 12px),
    linear-gradient(to left, rgba(0,0,0,0.12), rgba(0,0,0,0) 12px);
  background-position: left, right, left, right;
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

.tab-container::-webkit-scrollbar { display: none; }

.tab-item {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  background: transparent;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.tab-item.active {
  background: var(--surface-base);
  color: var(--color-primary-500);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-sm);
}

.tab-item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Dark mode tabs */
.dark-mode-active .tab-container {
  background: var(--surface-sunken);
  border-color: var(--border-subtle);
}

.dark-mode-active .tab-item {
  color: var(--text-secondary);
}

.dark-mode-active .tab-item.active {
  background: var(--surface-raised);
  color: var(--color-secondary-400);
  box-shadow: var(--shadow-sm);
}

/* src/styles/cards.css — Sistema de tarjetas unificado */

/* ── BASE COMPARTIDA ──────────────────────────────────────────── */
.corp-card,
.h-card {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Card vertical — la variante más común */
.corp-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Card horizontal — lista, items de resumen */
.h-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  border-left: 3px solid var(--color-primary-500);
}

/* ── INTERACCIÓN HOVER ────────────────────────────────────────── */
.corp-card:hover,
.h-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-default);
}

/* ── IMAGEN EN CARD ───────────────────────────────────────────── */
.card-img-container {
  width: 100%;
  height: 180px;
  background: var(--surface-sunken);
  overflow: hidden;
  position: relative;
}

.card-img-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-4);
}

.corp-card:hover .card-img-container img {
  transform: scale(1.06);
  transition: transform var(--transition-slow);
}

/* ── BODY DE CARD ─────────────────────────────────────────────── */
.card-body-content {
  padding: var(--space-6);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.card-title-main {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-primary-700);
  margin-bottom: var(--space-3);
}

.card-description {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
  flex-grow: 1;
}

/* ── VARIANTES DE CARD ────────────────────────────────────────── */

/* Card informativa — dato destacado con borde izquierdo */
.card-info {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--color-primary-500);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-xs);
}

/* Card compacta — para listas densas */
.card-compact {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-xs);
}

.card-compact:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Card de dashboard — superficie elevada con acento sutil */
.card-dashboard {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

/* Card interactiva — hover más pronunciado */
.card-interactive {
  cursor: pointer;
}

.card-interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* ── ZOOM HINT EN IMAGEN ──────────────────────────────────────── */
.card-img-zoom-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(89, 37, 130, 0);
  color: #fff;
  opacity: 0;
  transition: opacity var(--transition-base), background var(--transition-base);
  pointer-events: none;
}

.card-img-container:hover .card-img-zoom-hint {
  background: rgba(89, 37, 130, 0.42);
  opacity: 1;
}

/* ── DARK MODE ────────────────────────────────────────────────── */
.dark-mode-active .corp-card,
.dark-mode-active .h-card {
  background: var(--surface-card);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.dark-mode-active .card-img-container {
  background: var(--surface-sunken);
}

.dark-mode-active .card-title-main {
  color: var(--color-secondary-400);
}

.dark-mode-active .card-body-content {
  background: var(--surface-card);
}

.dark-mode-active .card-info,
.dark-mode-active .card-compact,
.dark-mode-active .card-dashboard {
  background: var(--surface-card);
  border-color: var(--border-subtle);
}

.dark-mode-active .card-info {
  border-left-color: var(--color-secondary-500);
}

/* ── CARD MORADA DE AUTENTICACIÓN (Login / FlujoSoporte) ─────────
   Reemplaza el .card/.card-purple heredado de Bootstrap. Sin hover:
   estas cards son estáticas, a diferencia de .corp-card. ────────── */
.login-card-purple {
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}
/* src/styles/Forms.css — Sistema de formularios corporativo */

/* ── CONTENEDOR BASE ──────────────────────────────────────────── */
.corp-form-container {
  background: var(--surface-base);
  padding: var(--space-10);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  max-width: 820px;
  margin: 0 auto;
  border: 1px solid var(--border-subtle);
}

/* ── GRUPO DE CAMPO ───────────────────────────────────────────── */
.form-group {
  margin-bottom: var(--space-5);
  text-align: left;
}

/* ── LABEL ────────────────────────────────────────────────────── */
.form-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}

.form-label-required::after {
  content: ' *';
  color: var(--color-error);
  font-weight: var(--weight-bold);
}

/* ── INPUTS, SELECTS, TEXTAREAS ───────────────────────────────── */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.625rem var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  outline: none;
  appearance: none;
}

/* Oculta los controles nativos de incremento/decremento en todos los campos
   numéricos. Se conserva la validación y la entrada por teclado; solo se
   elimina la flecha visual en Chrome, Edge, Safari y Firefox. */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-tertiary);
}

/* Estado focus — ring primario visible */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-primary-500);
  box-shadow: var(--focus-ring);
}

/* Estado hover */
.form-input:hover:not(:focus),
.form-select:hover:not(:focus),
.form-textarea:hover:not(:focus) {
  border-color: var(--border-strong);
}

/* Estado deshabilitado */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background: var(--surface-sunken);
  color: var(--text-disabled);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Estado error */
.form-input.error,
.form-textarea.error {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px var(--color-error-light);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

/* ── MENSAJE DE AYUDA ─────────────────────────────────────────── */
.form-hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

.form-hint.error {
  color: var(--color-error);
}

/* ── TÍTULO DE SECCIÓN ────────────────────────────────────────── */
.form-section-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary-600);
  border-bottom: 2px solid var(--color-secondary-500);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-5);
  margin-top: var(--space-8);
}

/* ── CHIPS / TAGS ─────────────────────────────────────────────── */
.form-chip {
  background: var(--color-primary-50);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-primary-700);
  border: 1px solid var(--color-primary-100);
}

.form-chip .remove {
  cursor: pointer;
  color: var(--color-error);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  line-height: 1;
  display: flex;
  align-items: center;
}

/* ── CAJA INFORMATIVA ─────────────────────────────────────────── */
.form-info-box {
  padding: var(--space-5);
  background: var(--surface-sunken);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-8);
  border: 1px solid var(--border-subtle);
}

/* ── DARK MODE ────────────────────────────────────────────────── */
.dark-mode-active .corp-form-container {
  background: var(--surface-base);
  border-color: var(--border-default);
  box-shadow: var(--shadow-md);
}

.dark-mode-active .form-label,
.dark-mode-active .form-section-title {
  color: var(--text-primary);
}

.dark-mode-active .form-section-title {
  color: var(--text-primary);
  border-color: var(--color-secondary-500);
}

.dark-mode-active .form-input,
.dark-mode-active .form-select,
.dark-mode-active .form-textarea {
  background: var(--surface-sunken);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.dark-mode-active .form-input::placeholder,
.dark-mode-active .form-textarea::placeholder {
  color: var(--text-tertiary);
}

.dark-mode-active .form-input:focus,
.dark-mode-active .form-select:focus,
.dark-mode-active .form-textarea:focus {
  border-color: var(--color-secondary-500);
  box-shadow: var(--focus-ring);
}

.dark-mode-active .form-input:disabled,
.dark-mode-active .form-select:disabled,
.dark-mode-active .form-textarea:disabled {
  background: var(--surface-sunken);
  color: var(--text-disabled);
}

.dark-mode-active .form-chip {
  background: rgba(89, 37, 130, 0.15);
  border-color: rgba(89, 37, 130, 0.25);
  color: var(--color-primary-200);
}

.dark-mode-active .form-info-box {
  background: var(--surface-sunken);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.dark-mode-active .form-hint {
  color: var(--text-tertiary);
}

/* Ocultar flechas/spinners de los inputs numéricos (evita el "scroll" visual) */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type='number'] {
  -moz-appearance: textfield;
}
/* src/styles/Tables.css — Sistema de tablas estilo Google Admin */

/* ── CONTENEDOR ───────────────────────────────────────────────── */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--surface-base);
  /* Sombra de scroll: en móvil el scrollbar nativo suele quedar
     invisible hasta tocar, así que sin esto una tabla ancha
     parece "cortada" en vez de deslizable. Los gradientes viajan
     con el contenido y solo se ven cuando hay más que scrollear. */
  background-image:
    linear-gradient(to right, var(--surface-base) 30%, rgba(0,0,0,0)),
    linear-gradient(to left, var(--surface-base) 30%, rgba(0,0,0,0)),
    linear-gradient(to right, rgba(0,0,0,0.12), rgba(0,0,0,0) 12px),
    linear-gradient(to left, rgba(0,0,0,0.12), rgba(0,0,0,0) 12px);
  background-position: left, right, left, right;
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* ── TABLA BASE ───────────────────────────────────────────────── */
.corp-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  background: var(--surface-base);
  font-size: var(--text-sm);
}

/* Encabezados — estilo Google Admin */
.corp-table th {
  background: var(--surface-sunken);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
  user-select: none;
}

/* Celdas de dato */
.corp-table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}

/* Última fila sin borde inferior */
.corp-table tbody tr:last-child td {
  border-bottom: none;
}

/* ── FILAS INTERACTIVAS ───────────────────────────────────────── */
.corp-table-row {
  background: var(--surface-base);
}

.corp-table-row:hover td:not(.sticky-cell):not(.plan-cell) {
  background-color: var(--surface-sunken);
}

/* Filas alternas (zebra) — opcional */
.corp-table-striped .corp-table-row:nth-child(even) td {
  background: var(--surface-sunken);
}

/* ── CELDAS ESPECIALES ────────────────────────────────────────── */

/* Celda sticky de nombre/fila */
.sticky-cell {
  position: sticky;
  left: 0;
  background: var(--surface-base);
  z-index: 1;
}

/* Celda de plan destacado */
.plan-cell {
  background: var(--color-primary-50);
  border-left: 3px solid var(--color-primary-500);
  color: var(--color-primary-700);
  font-weight: var(--weight-semibold);
}

/* ── TABLA AYUDA VENTAS (GenericTable) ────────────────────────── */

.generic-table-title {
  color: var(--text-primary);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}

.generic-table-title span {
  background-color: var(--color-primary-500);
  border-radius: var(--radius-xs);
  padding: 0 var(--space-2);
  color: white;
}

.generic-table-container {
  background-color: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.generic-table-container table {
  background-color: var(--surface-base);
  color: var(--text-primary);
}

.generic-table-container th.sticky-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  color: var(--color-primary-500);
  border-bottom: 1px solid var(--border-default);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.generic-table-container td {
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
}

.generic-table-container td.sticky-cell {
  background-color: var(--surface-base);
  color: var(--color-primary-700);
  font-weight: var(--weight-semibold);
  box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.08);
}

.generic-table-container td.plan-cell {
  background-color: var(--color-primary-50);
  border-left: 3px solid var(--color-primary-500);
  color: var(--color-primary-700);
  font-weight: var(--weight-semibold);
  box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.08);
}

.generic-table-container td.total-plan-cell {
  background-color: transparent;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  border-bottom: 1px solid var(--border-subtle);
}

/* ── DARK MODE ────────────────────────────────────────────────── */

.dark-mode-active .table-wrap {
  background: var(--surface-base);
  border-color: var(--border-subtle);
}

.dark-mode-active .corp-table {
  background: var(--surface-base);
  color: var(--text-primary);
}

.dark-mode-active .corp-table th {
  background: var(--surface-sunken);
  color: var(--text-secondary);
  border-bottom-color: var(--border-default);
}

.dark-mode-active .corp-table td {
  border-bottom-color: var(--border-subtle);
  color: var(--text-primary);
}

.dark-mode-active .corp-table-row {
  background: var(--surface-base);
}

.dark-mode-active .corp-table-row:hover td:not(.sticky-cell):not(.plan-cell) {
  background-color: var(--surface-raised);
}

/* Dark Ayuda Ventas */
.dark-mode-active .generic-table-title {
  color: var(--color-secondary-400);
}

.dark-mode-active .generic-table-title span {
  background-color: var(--color-secondary-500);
}

.dark-mode-active .generic-table-container {
  background-color: var(--surface-base);
  border-color: var(--border-subtle);
}

.dark-mode-active .generic-table-container table {
  background-color: var(--surface-base);
  color: var(--text-primary);
}

.dark-mode-active .generic-table-container th.sticky-header {
  background: rgba(26, 29, 35, 0.97);
  color: var(--color-secondary-400);
  border-bottom-color: var(--border-default);
}

.dark-mode-active .generic-table-container td {
  background-color: var(--surface-base);
  border-bottom-color: var(--border-subtle);
  color: var(--text-secondary);
}

.dark-mode-active .generic-table-container td.sticky-cell {
  background-color: var(--surface-base);
  color: var(--text-primary);
  box-shadow: 4px 0 10px rgba(0, 0, 0, 0.4);
}

.dark-mode-active .generic-table-container td.plan-cell {
  background-color: rgba(89, 37, 130, 0.10);
  border-left-color: var(--color-secondary-500);
  color: var(--color-secondary-300);
  box-shadow: 4px 0 10px rgba(0, 0, 0, 0.4);
}

.dark-mode-active .generic-table-container td.total-plan-cell {
  background-color: transparent;
  color: var(--text-tertiary);
  border-bottom-color: var(--border-subtle);
}

/* ── TIEMPO EXCEDIDO (tabla de marcaciones) ───────────────────── */
.time-exceeded {
  color: #dc2626 !important;
  font-weight: 700 !important;
}

.dark-mode-active .time-exceeded {
  color: #f87171 !important;
}

/* ── TABLA DE FICHA (etiqueta / valor) ──────────────────────────────────
   Para bloques que describen un solo registro, como "Datos del servicio" de
   una orden de trabajo. Antes esos bloques alternaban filas apiladas y filas
   en línea, así que las etiquetas no quedaban alineadas entre sí y el
   conjunto se leía desordenado. Aquí la etiqueta siempre ocupa la primera
   columna y el valor la segunda. */
.corp-table--ficha th,
.corp-table--ficha td {
  padding: var(--space-3) var(--space-4);
  vertical-align: top;
}

.corp-table--ficha th {
  width: 36%;
  min-width: 7.5rem;
  white-space: normal;      /* etiquetas largas envuelven en vez de ensanchar */
  line-height: 1.35;
}

/* En pantallas estrechas la etiqueta se encoge para dejar respirar al valor */
@media (max-width: 480px) {
  .corp-table--ficha th {
    width: 42%;
    min-width: 0;
  }
  .corp-table--ficha th,
  .corp-table--ficha td {
    padding: var(--space-2) var(--space-3);
  }
}
/* src/styles/Modal.css — Sistema de modales y overlays */

/* ── OVERLAY ──────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 10, 25, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  padding: var(--space-5);
}

/* ── PANEL MODAL ──────────────────────────────────────────────── */
.modal-content {
  background: #ffffff !important;
  color: #1f2937 !important;
  padding: var(--space-10);
  border-radius: var(--radius-3xl);
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 2 * var(--space-5));
  overflow-y: auto;
  box-shadow: var(--shadow-2xl);
  position: relative;
  animation: modalPop 0.35s var(--ease-spring);
  border: 1px solid var(--border-subtle);
}

/* Variante grande */
.modal-content-lg {
  max-width: 880px;
  max-height: 90vh;
  overflow-y: auto;
}

/* ── DARK MODE ────────────────────────────────────────────────── */
.dark-mode-active .modal-overlay {
  background: rgba(0, 0, 0, 0.65);
}

.dark-mode-active .modal-content {
  background: #1c1c1d !important;
  color: #ffffff !important;
  border-color: var(--border-default);
  box-shadow: var(--shadow-2xl);
}

/* ── BOTONES DENTRO DE MODAL ──────────────────────────────────── */
.modal-content .btn-ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  padding: 0.625rem var(--space-6);
  border-radius: var(--radius-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

.modal-content .btn-ghost:hover {
  background: var(--hover-overlay);
  color: var(--text-primary);
}

.dark-mode-active .modal-content .btn-ghost {
  border-color: var(--border-default);
  color: var(--text-secondary);
}

.modal-content .btn-primary {
  background: var(--color-primary-500);
  color: white;
  border: none;
  padding: 0.625rem var(--space-6);
  border-radius: var(--radius-lg);
  font-weight: var(--weight-semibold);
}

.modal-content .btn-primary:hover {
  background: var(--color-primary-600);
}

.dark-mode-active .modal-content .btn-primary {
  background: var(--color-secondary-500);
  color: var(--color-neutral-900);
}

.dark-mode-active .modal-content .btn-primary:hover {
  background: var(--color-secondary-600);
}

/* ── SPINNER ──────────────────────────────────────────────────── */
.modal-spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-8);
}

.modern-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--border-default);
  border-top-color: var(--color-primary-500);
  border-radius: var(--radius-full);
  animation: spin 0.9s linear infinite;
}

.dark-mode-active .modern-spinner {
  border-color: var(--border-default);
  border-top-color: var(--color-secondary-500);
}

/* ── ANIMACIONES ──────────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes modalPop {
  0%   { transform: scale(0.92) translateY(16px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── RESPONSIVE MODAL ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .modal-overlay {
    padding: var(--space-3);
    align-items: flex-end;
  }
  .modal-content {
    padding: var(--space-6);
    border-radius: var(--radius-2xl) var(--radius-2xl) var(--radius-lg) var(--radius-lg);
    max-height: 92vh;
    overflow-y: auto;
    animation: modalSlideUp 0.3s var(--ease-standard);
  }
  .modal-content-lg {
    max-width: 100%;
    max-height: 92vh;
  }
}

@media (max-width: 480px) {
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .modal-content {
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    max-height: 95vh;
    width: 100%;
    max-width: 100%;
  }
}

@keyframes modalSlideUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}