/* ─────────────────────────────────────────────────────────────────────────────
   Base compartida del sitio y del panel. Sin compilación: se edita y se recarga.
   El color de acento (--acento) lo pone el layout desde los ajustes del sitio,
   para que la marca blanca cambie de color sin tocar este archivo.
   ───────────────────────────────────────────────────────────────────────────── */
/* Oscuro por defecto (decisión de JC). El claro se elige con el botón del sol
   y se recuerda en el navegador (data-tema="claro" en <html>). */
:root {
  color-scheme: dark;
  --acento: #b01530;
  --acento-vivo: color-mix(in srgb, var(--acento) 75%, #ff4d6d);
  --acento-suave: color-mix(in srgb, var(--acento) 18%, var(--superficie));
  --acento-oscuro: color-mix(in srgb, var(--acento) 80%, black);
  --fondo: #0e0c0f;
  --fondo-2: #141116;
  --superficie: #19161b;
  --superficie-2: #231f26;
  --borde: #322b35;
  --texto: #f5f1f3;
  --texto-2: #bcb2b9;
  --texto-3: #8b8189;
  --exito: #4ade80;
  --exito-suave: #11291a;
  --aviso: #fbbf24;
  --aviso-suave: #2b210b;
  --error: #f87171;
  --error-suave: #2e1214;
  --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 8px 28px rgb(0 0 0 / .35);
  --brillo: 0 0 0 1px color-mix(in srgb, var(--acento) 40%, transparent), 0 10px 40px color-mix(in srgb, var(--acento) 25%, transparent);

  --radio: 14px;
  --radio-sm: 9px;

  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-titulos: "Outfit", var(--fuente);
  --text-h1: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem);
  --text-h2: 1.3rem;
  --text-h3: 1.05rem;
  --text-base: .95rem;
  --text-sm: .85rem;
  --text-xs: .75rem;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}
:root[data-tema="claro"] {
  color-scheme: light;
  --acento-vivo: var(--acento);
  --fondo: #faf7f5;
  --fondo-2: #f3eeeb;
  --superficie: #ffffff;
  --superficie-2: #f3eeeb;
  --borde: #e7dfdb;
  --texto: #18181b;
  --texto-2: #57534e;
  --texto-3: #8a817c;
  --exito: #15803d;
  --exito-suave: #dcfce7;
  --aviso: #b45309;
  --aviso-suave: #fef3c7;
  --error: #b91c1c;
  --error-suave: #fee2e2;
  --sombra: 0 1px 2px rgb(0 0 0 / .04), 0 4px 16px rgb(0 0 0 / .05);
  --brillo: var(--sombra);
}
/* Logo e imágenes por tema */
:root:not([data-tema="claro"]) .solo-claro, :root[data-tema="claro"] .solo-oscuro { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: var(--weight-normal) var(--text-base)/1.55 var(--fuente);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-family: var(--fuente-titulos); }
h1 { font-size: var(--text-h1); font-weight: var(--weight-bold); letter-spacing: -.02em; }
h2 { font-size: var(--text-h2); font-weight: var(--weight-semibold); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-semibold); }
p { margin: 0 0 1em; }
.muted { color: var(--texto-2); }
.small { font-size: var(--text-sm); }
.oculto-visual { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 42px; padding: .55em 1.15em;
  border: 1px solid transparent; border-radius: 999px;
  font: var(--weight-semibold) var(--text-base)/1 var(--fuente);
  cursor: pointer; text-decoration: none !important; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--acento); color: #fff; }
.btn-primario:hover { background: var(--acento-oscuro); }
.btn-secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde); }
.btn-secundario:hover { border-color: var(--texto-3); }
.btn-peligro { background: var(--superficie); color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, var(--superficie)); }
.btn-peligro:hover { background: var(--error-suave); }
.btn-texto { background: none; border: 0; color: var(--acento); padding-inline: .4em; min-height: auto; }
.btn-bloque { width: 100%; }
.btn-sm { min-height: 34px; padding: .4em .9em; font-size: var(--text-sm); }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.campo { display: grid; gap: .35rem; margin-bottom: 1rem; }
.campo > label, .campo > .etiqueta { font-weight: var(--weight-medium); font-size: var(--text-sm); }
.ayuda { color: var(--texto-3); font-size: var(--text-xs); }
.input, .campo input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]), .campo select, .campo textarea {
  width: 100%; min-height: 44px; padding: .6em .85em;
  border: 1px solid var(--borde); border-radius: var(--radio-sm);
  background: var(--superficie); color: var(--texto); font: inherit;
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .input:focus {
  outline: 2px solid color-mix(in srgb, var(--acento) 35%, transparent); outline-offset: 1px; border-color: var(--acento);
}
.campo.con-error input, .campo.con-error select { border-color: var(--error); }
.error-campo { color: var(--error); font-size: var(--text-xs); }
.casilla { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--text-sm); cursor: pointer; }
.casilla input { margin-top: .2rem; width: 18px; height: 18px; accent-color: var(--acento); flex: none; }
.fila-campos { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Teléfono: selector de país + número (igual que tucine.club) */
.tel { display: flex; gap: .5rem; position: relative; }
.tel .input { flex: 1; min-width: 0; }
.buscapais { position: relative; flex: none; }
.buscapais-boton { height: 100%; min-height: 44px; padding: 0 .8em; border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--superficie); font: inherit; cursor: pointer; white-space: nowrap; }
.buscapais-panel { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: min(300px, 80vw); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-sm); box-shadow: var(--sombra); padding: .5rem; }
.buscapais-panel input { width: 100%; min-height: 38px; padding: .4em .6em; border: 1px solid var(--borde); border-radius: 6px; font: inherit; }
.buscapais-lista { list-style: none; margin: .4rem 0 0; padding: 0; max-height: 240px; overflow: auto; }
.buscapais-lista li { display: flex; justify-content: space-between; gap: .5rem; padding: .45em .5em; border-radius: 6px; cursor: pointer; font-size: var(--text-sm); }
.buscapais-lista li:hover, .buscapais-lista li.activa { background: var(--acento-suave); }

/* ── Avisos ──────────────────────────────────────────────────────────────── */
.alerta { padding: .8rem 1rem; border-radius: var(--radio-sm); margin-bottom: 1rem; font-size: var(--text-sm); border: 1px solid transparent; }
.alerta-exito { background: var(--exito-suave); color: var(--exito); border-color: color-mix(in srgb, var(--exito) 25%, var(--superficie)); }
.alerta-error { background: var(--error-suave); color: var(--error); border-color: color-mix(in srgb, var(--error) 25%, var(--superficie)); }
.alerta-aviso { background: var(--aviso-suave); color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 25%, var(--superficie)); }
.alerta ul { margin: 0; padding-left: 1.1rem; }

/* ── Cards (Patrón B: cabecera con título y acción, cuerpo con relleno) ──── */
.card { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); margin-bottom: 1.25rem; }
.card-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--borde); }
.card-cabecera h2 { margin: 0; font-size: var(--text-h3); }
.card-cuerpo { padding: 1.25rem; }
.card-pie { padding: .9rem 1.25rem; border-top: 1px solid var(--borde); display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; }

/* ── Etiquetas ───────────────────────────────────────────────────────────── */
.etq { display: inline-flex; align-items: center; gap: .3em; padding: .15em .6em; border-radius: 999px; font-size: var(--text-xs); font-weight: var(--weight-semibold); background: var(--superficie-2); color: var(--texto-2); }
.etq-exito { background: var(--exito-suave); color: var(--exito); }
.etq-aviso { background: var(--aviso-suave); color: var(--aviso); }
.etq-error { background: var(--error-suave); color: var(--error); }
.etq-acento { background: var(--acento-suave); color: var(--acento-vivo); }

/* ── Tablas ──────────────────────────────────────────────────────────────── */
.tabla-envoltura { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th { text-align: left; font-weight: var(--weight-semibold); color: var(--texto-2); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; padding: .7rem 1rem; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.table td { padding: .75rem 1rem; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in srgb, var(--superficie-2) 60%, var(--superficie)); }
.vacio { text-align: center; padding: 2.5rem 1rem; color: var(--texto-3); }
.vacio svg { width: 40px; height: 40px; margin: 0 auto .6rem; opacity: .5; }

.icono { width: 1.1em; height: 1.1em; flex: none; }

/* Paginación (parciales.paginacion) */
.pagination { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 1rem 0; }
.pagination li > * { display: inline-flex; padding: .45em 1em; border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie); font-size: var(--text-sm); }
.pagination li.disabled > * { opacity: .45; }

/* Botón de tema (sol / luna) */
.boton-tema { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-2); cursor: pointer; flex: none; }
.boton-tema:hover { color: var(--texto); border-color: var(--texto-3); }
.boton-tema .icono { width: 18px; height: 18px; }
:root:not([data-tema="claro"]) .boton-tema .sol, :root[data-tema="claro"] .boton-tema .luna { display: none; }
.btn-primario { box-shadow: 0 6px 20px color-mix(in srgb, var(--acento) 35%, transparent); }