/*
  Sistema de diseño Verticall - tokens y base.
  Copiar a src/styles/tokens.css e importar primero. Sin dependencias: sirve con o sin Bootstrap.
  La marca se cambia SOLO con --color-primario* / --color-secundario*.
*/
:root {
  /* Marca */
  --color-primario: #f14e2d;
  --color-primario-rgb: 241, 78, 45;
  --color-primario-hover: #d9421f;
  --color-primario-activo: #bf3a1b;
  --color-sobre-primario: #ffffff;
  --color-secundario: #3aa695;
  --color-secundario-rgb: 58, 166, 149;

  /* Estados */
  --color-peligro: #dc3b3b;
  --color-exito: #2e9d6b;
  --color-aviso: #e0a020;

  /* Forma */
  --radio: 12px;
  --radio-campo: 8px;
  --alto-campo: 40px;

  /* Espaciado (escala de 4px) */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;

  /* Tipografía */
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --texto-xs: 0.75rem;
  --texto-sm: 0.8125rem;  /* etiquetas */
  --texto-base: 0.875rem; /* cuerpo */
  --texto-lg: 1.125rem;   /* títulos de panel */
  --texto-xl: 1.5rem;     /* título de página */

  --transicion: 0.15s ease;
}

html[data-theme="light"], :root:not([data-theme]) {
  --bg-app: #e4e9f0;
  --bg-surface: #ffffff;
  --bg-sidebar: #d9e0ea;
  --bg-input: #ffffff;
  --bg-hover: #edf0f5;
  --text: #1f2933;
  --text-muted: #5f6c7b;
  --border: #cbd3de;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 4px 12px rgba(16, 24, 40, 0.08);
}

html[data-theme="dark"] {
  --bg-app: #0f1419;
  --bg-surface: #171d25;
  --bg-sidebar: #121820;
  --bg-input: #1d2530;
  --bg-hover: #222c38;
  --text: #e6eaef;
  --text-muted: #98a4b3;
  --border: #364356;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text);
  font-family: var(--fuente);
  font-size: var(--texto-base);
}

/* ---------- Componentes base ---------- */
.panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  box-shadow: var(--shadow);
  padding: var(--esp-5);
}

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo-label { font-size: var(--texto-sm); font-weight: 500; color: var(--text-muted); }
.campo input, .campo select, .campo textarea {
  height: var(--alto-campo);
  padding: 0 var(--esp-3);
  border: 1px solid var(--border);
  border-radius: var(--radio-campo);
  background: var(--bg-input);
  color: var(--text);
  font: inherit;
}
.campo textarea { height: auto; padding: var(--esp-2) var(--esp-3); }
.campo input:read-only { background: var(--bg-hover); color: var(--text-muted); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 0;
  border-color: var(--color-primario);
  box-shadow: 0 0 0 3px rgba(var(--color-primario-rgb), 0.18);
}
.campo .invalido { border-color: var(--color-peligro); box-shadow: 0 0 0 3px rgba(220, 59, 59, 0.15); }

.btn, .btn-sec {
  height: var(--alto-campo);
  padding: 0 var(--esp-4);
  border-radius: var(--radio-campo);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transicion), border-color var(--transicion);
}
.btn { border: 1px solid var(--color-primario); background: var(--color-primario); color: var(--color-sobre-primario); }
.btn:hover { background: var(--color-primario-hover); border-color: var(--color-primario-hover); }
.btn:active { background: var(--color-primario-activo); }
.btn-sec { border: 1px solid var(--border); background: transparent; color: var(--text); }
.btn-sec:hover { background: var(--bg-hover); }
.btn:disabled, .btn-sec:disabled { opacity: 0.55; cursor: not-allowed; }
.btn:focus-visible, .btn-sec:focus-visible { outline: 3px solid rgba(var(--color-primario-rgb), 0.35); outline-offset: 2px; }

.btn-icono {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radio-campo);
  background: var(--bg-surface); color: var(--text-muted); cursor: pointer;
  transition: color var(--transicion), border-color var(--transicion), background-color var(--transicion);
}
.btn-icono:hover { color: var(--color-primario); border-color: var(--color-primario); background: rgba(var(--color-primario-rgb), 0.08); }
.btn-icono.peligro:hover { color: var(--color-peligro); border-color: var(--color-peligro); background: rgba(220, 59, 59, 0.08); }

.tabla { width: 100%; border-collapse: collapse; background: var(--bg-surface); }
.tabla th { text-align: left; padding: var(--esp-3); background: var(--bg-hover); color: var(--text-muted); font-weight: 500; border-bottom: 1px solid var(--border); }
.tabla td { padding: var(--esp-3); border-bottom: 1px solid var(--border); }
.tabla tbody tr:hover { background: var(--bg-hover); }

/* Layout: menú lateral + contenido */
.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.app-menu { background: var(--bg-sidebar); border-right: 1px solid var(--border); padding: var(--esp-4); }
.app-contenido { padding: var(--esp-5); }
@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; }
  .app-menu { border-right: 0; border-bottom: 1px solid var(--border); }
  .app-contenido { padding: var(--esp-4); }
}