/* Lexia Legal — hoja de estilos compartida (plan §14) */

:root,
:root[data-theme="light"] {
  --color-fondo: #F7F8FA;
  --color-superficie: #FFFFFF;
  --color-superficie-2: #F1F2F4;
  --color-texto: #1E2A38;
  --color-texto-secundario: #5B6B7A;
  --color-texto-tenue: #8A97A3;
  --color-borde: #E2E5E9;
  --color-acento: #E4572E;
  --color-acento-hover: #C8461F;
  --color-detalle: #B8860B;
  --color-exito: #2E7D5B;
  --color-advertencia: #C17817;
  --color-peligro: #B23B3B;
  --sombra: 0 1px 2px rgba(30, 42, 56, 0.06);
}

:root[data-theme="dark"] {
  --color-fondo: #14202C;
  --color-superficie: #1B2836;
  --color-superficie-2: #20303F;
  --color-texto: #F1F2F4;
  --color-texto-secundario: #9AAAB8;
  --color-texto-tenue: #6C7B89;
  --color-borde: rgba(255, 255, 255, 0.08);
  --color-acento: #FF6B3D;
  --color-acento-hover: #FF8258;
  --color-detalle: #D4A017;
  --color-exito: #4CAF7D;
  --color-advertencia: #D99A2B;
  --color-peligro: #E06060;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-fondo: #14202C;
    --color-superficie: #1B2836;
    --color-superficie-2: #20303F;
    --color-texto: #F1F2F4;
    --color-texto-secundario: #9AAAB8;
    --color-texto-tenue: #6C7B89;
    --color-borde: rgba(255, 255, 255, 0.08);
    --color-acento: #FF6B3D;
    --color-acento-hover: #FF8258;
    --color-detalle: #D4A017;
    --color-exito: #4CAF7D;
    --color-advertencia: #D99A2B;
    --color-peligro: #E06060;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  background-color: var(--color-fondo);
  color: var(--color-texto);
  min-height: 100vh;
  transition: background-color .15s ease, color .15s ease;
}

a { color: inherit; }

.envoltorio {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}
.envoltorio.angosto { max-width: 900px; }
.envoltorio.login { max-width: 400px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 0; padding-bottom: 0; }

/* Barra superior ------------------------------------------------------- */
.barra-superior {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 0;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-borde);
}
.marca { font-size: 1.15rem; font-weight: 500; display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--color-texto); }
.marca .marca-acento { color: var(--color-acento); }
.marca svg { flex-shrink: 0; }

.nav-pastillas { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.pastilla {
  color: var(--color-texto-secundario);
  text-decoration: none;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  border: 1px solid transparent;
  transition: .15s ease;
}
.pastilla:hover { background: var(--color-superficie-2); color: var(--color-texto); }
.pastilla.activa { background: var(--color-acento); color: #fff; }
.pastilla.discreta { border-color: var(--color-borde); }

.perfil { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; color: var(--color-texto-secundario); }

/* Botones --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: .15s ease;
}
.btn-primario { background: var(--color-acento); color: #fff; }
.btn-primario:hover { background: var(--color-acento-hover); }
.btn-secundario { background: transparent; border-color: var(--color-borde); color: var(--color-texto); }
.btn-secundario:hover { background: var(--color-superficie-2); }
.btn-peligro { background: transparent; border-color: var(--color-peligro); color: var(--color-peligro); }
.btn-peligro:hover { background: var(--color-peligro); color: #fff; }
.btn-pequeno { padding: 6px 12px; font-size: 0.8rem; border-radius: 8px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Tarjetas / paneles ------------------------------------------------------ */
.tarjeta {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--sombra);
}
.titulo-panel { font-size: 0.75rem; color: var(--color-texto-secundario); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }

/* Formularios ------------------------------------------------------------ */
.campo { margin-bottom: 18px; }
.campo label { display: block; font-size: 0.8rem; color: var(--color-texto-secundario); margin-bottom: 6px; }
.campo input[type="text"],
.campo input[type="url"],
.campo input[type="password"],
.campo input[type="file"],
.campo select,
.campo textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--color-texto);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  padding: 10px 14px;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--color-acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-acento) 20%, transparent);
}
.campo select option { background: var(--color-superficie); color: var(--color-texto); }
.fila-campos { display: flex; gap: 16px; }
.fila-campos .campo { flex: 1; }

.barra-formato { display: flex; gap: 4px; margin-bottom: 6px; }
.barra-formato button {
  background: var(--color-superficie-2); border: 1px solid var(--color-borde); color: var(--color-texto-secundario);
  border-radius: 6px; padding: 4px 10px; font-size: 0.78rem; cursor: pointer; font-family: inherit;
}
.barra-formato button:hover { color: var(--color-texto); border-color: var(--color-acento); }

/* Insignias / estados ------------------------------------------------------ */
.insignia { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; border: 1px solid var(--color-borde); color: var(--color-texto-secundario); }
.insignia.acento { color: var(--color-acento); border-color: color-mix(in srgb, var(--color-acento) 40%, transparent); background: color-mix(in srgb, var(--color-acento) 10%, transparent); }

.alerta { padding: 12px 16px; border-radius: 8px; font-size: 0.85rem; margin-bottom: 16px; }
.alerta-error { background: color-mix(in srgb, var(--color-peligro) 12%, transparent); color: var(--color-peligro); border: 1px solid color-mix(in srgb, var(--color-peligro) 35%, transparent); }
.alerta-exito { background: color-mix(in srgb, var(--color-exito) 12%, transparent); color: var(--color-exito); border: 1px solid color-mix(in srgb, var(--color-exito) 35%, transparent); }

/* Lista/tabla densa (§14.3) ------------------------------------------------ */
.tabla-criterios { width: 100%; border-collapse: collapse; }
.tabla-criterios th {
  text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-texto-secundario); padding: 8px 12px; border-bottom: 1px solid var(--color-borde);
}
.tabla-criterios td { padding: 12px; border-bottom: 1px solid var(--color-borde); font-size: 0.88rem; }
.tabla-criterios tr:last-child td { border-bottom: none; }
.tabla-criterios tr.fila-enlace { cursor: pointer; }
.tabla-criterios tr.fila-enlace:hover { background: var(--color-superficie-2); }
.tabla-criterios .col-titulo { font-weight: 500; }
.punto-grupo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* Selector de tema --------------------------------------------------------- */
.selector-tema {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--color-borde); background: transparent; color: var(--color-texto-secundario);
  cursor: pointer;
}
.selector-tema:hover { background: var(--color-superficie-2); color: var(--color-texto); }
.selector-tema svg { width: 16px; height: 16px; }

@media (max-width: 700px) {
  .fila-campos { flex-direction: column; gap: 0; }
  .fila-kpi { flex-wrap: wrap; }
  .barra-superior { align-items: flex-start; }
  .barra-superior .perfil { width: 100%; }
}

@media print {
  .barra-superior, .acciones-criterio, .btn-copiar-criterio { display: none !important; }
  body { background: #fff !important; color: #111 !important; }
  .envoltorio, .envoltorio.angosto { max-width: none; padding: 0; }
  .criterio-seccion { break-inside: avoid; border-color: #ccc !important; box-shadow: none !important; }
  .criterio-seccion > * { display: block !important; }
}