/* /assets/styles-editorial.css
   ---------------------------------------------------------------------------
   CAPA DE TEMA — se aplica ENCIMA de styles.css, que queda intacto.

   Solo toca tipografía, botones y densidad de tablas. No mueve nada de lugar:
   la estructura, las posiciones y los espaciados generales son los mismos.

   Para volver al estilo anterior alcanza con desactivarla (el interruptor en
   Perfil lo hace, y la elección queda guardada). No se borra ni se pisa nada
   del archivo original.
   --------------------------------------------------------------------------- */

/* ---------- TIPOGRAFÍA ---------- */
body.tema-editorial {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

body.tema-editorial h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 34px;
  letter-spacing: -0.015em;
  line-height: 1.12;
}
body.tema-editorial h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
}
body.tema-editorial h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* Cifras y datos destacados en serif: es lo que les da presencia sin
   necesidad de agrandarlos ni ponerlos en negrita. */
body.tema-editorial .stat-value,
body.tema-editorial .kpi-value,
body.tema-editorial .big-number {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Cifras tabulares: hace que las columnas de números alineen exactamente,
   que es lo que vuelve legible una efeméride. */
body.tema-editorial table,
body.tema-editorial .mono,
body.tema-editorial input[type="date"],
body.tema-editorial input[type="time"] {
  font-variant-numeric: tabular-nums;
}

/* ---------- BOTONES ---------- */
body.tema-editorial .btn {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background .35s cubic-bezier(.16,1,.3,1),
              border-color .35s cubic-bezier(.16,1,.3,1),
              color .35s cubic-bezier(.16,1,.3,1),
              transform .15s;
}
body.tema-editorial .btn:active { transform: scale(.985); }

body.tema-editorial .btn-primary {
  background: var(--navy);
  color: #F7F6F2;
}
body.tema-editorial .btn-primary:hover { background: #2E3644; }

body.tema-editorial .btn-ghost {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text-muted);
}
body.tema-editorial .btn-ghost:hover {
  border-color: var(--brass);
  color: var(--brass);
}

/* ---------- NAVEGACIÓN ---------- */
body.tema-editorial .nav-link {
  font-size: 13.5px;
  padding: 9px 13px;
  border-radius: 6px;
  transition: background .3s, color .3s;
}
body.tema-editorial .nav-link.active {
  background: var(--navy);
  color: #F7F6F2;
}

/* ---------- TABLAS DENSAS ----------
   Solo acá se comprime. Sobre un mes completo son unos 190 píxeles menos de
   alto: alrededor de ocho filas más visibles sin desplazarse. */
body.tema-editorial table th {
  font-size: 11.5px;
  font-weight: 500;
  padding: 9px 10px;
}
body.tema-editorial table td {
  padding: 6px 10px;
}
body.tema-editorial .appt {
  padding: 8px 0;
}

/* Filas de la efeméride: el resaltado del día actual y el paso del mouse
   se manejan acá en vez de con estilos incrustados. */
body.tema-editorial .efem-fila {
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .25s;
}
body.tema-editorial .efem-fila:hover { background: #FBFAF7; }
body.tema-editorial .efem-hoy { background: rgba(138,106,46,.05); }

/* ---------- DETALLES ---------- */
body.tema-editorial .muted { color: var(--text-muted); }
body.tema-editorial input,
body.tema-editorial select,
body.tema-editorial textarea {
  font-family: inherit;
  border-radius: 6px;
  padding: 11px 16px;
  transition: border-color .3s, background .3s;
}
body.tema-editorial textarea { border-radius: 12px; }
body.tema-editorial input:focus,
body.tema-editorial select:focus,
body.tema-editorial textarea:focus {
  border-color: var(--brass);
  outline: none;
}

/* ---------- COLORES DE LA RUEDA NATAL ----------
   La función que dibuja la carta no cambió: sigue siendo exactamente la misma.
   Lo único que se hizo fue sacarle los colores, que estaban escritos fijos
   para fondo claro, y traerlos acá. Así la misma rueda sirve para los dos
   temas. Si esta capa se desactiva, la función cae a sus valores originales
   y la carta se ve igual que siempre. */

/* Tema claro: segunda vuelta de contraste (la primera ya había oscurecido
   estos valores una vez, pero seguían viéndose pálidos en uso real). Se
   midió el contraste real contra --w-centro con la fórmula de WCAG: los
   anillos estaban entre 1.76:1 y 2.17:1 (el mínimo recomendado para líneas
   gráficas es 3:1), así que se oscurecieron de nuevo hasta pasar ese piso,
   manteniendo el mismo tono de cada uno (gris azulado en los anillos,
   violeta en el de cuerpos menores, dorado más oscuro en el eje) para no
   cambiar el carácter visual de la rueda, solo su legibilidad.
   División de casa y marca-10 ya tenían de sobra (13.8:1 y 8:1) y quedan
   igual. */
body.tema-editorial{
  --w-centro:#FBFBFC; --w-anillo-f:#6E7488; --w-anillo:#82879A;
  --w-anillo-tenue:#8D93A6; --w-anillo-menor:#9B7EBD;
  --w-division:#262A38; --w-chip:#FFFFFF;
  --w-marca-10:#4A4D5E; --w-marca-5:#6E7185; --w-marca-1:#7B7F92;
  --w-regla-texto:#6E7185;
  --w-eje:#96692A; --w-eje-chip:#1B2A4A; --w-eje-texto:#F1D9A8; --w-eje-grado:#5C5F70;
  --w-planeta-fondo:#FFFFFF; --w-planeta-grado:#4A453D;
  --w-retro:#A8432A; --w-cuerpo:#1B2A4A; --w-menor:#6B5B95;
  --w-tinte:0.13;
  --w-overlay-solar:#9C7A3D; --w-overlay-otro:#0E4A47;
  --w-overlay-fondo:#FFFFFF; --w-overlay-texto:#FFFFFF;
  --w-tabla-diagonal:#F0F0F3; --w-barra-fondo:#E8E4D8; --w-barra-defecto:#6E7185;
}

/* Tema oscuro: cada valor recalculado para leerse sobre fondo de tinta.
   El tinte de los elementos sube de 0,08 a 0,15 porque sobre oscuro un tinte
   tan leve directamente no se percibe. */
body.tema-editorial.tema-oscuro{
  --w-centro:#1A1712; --w-anillo-f:#4A4234; --w-anillo:#3A342A;
  --w-anillo-tenue:#332E26; --w-anillo-menor:#3E3730;
  --w-division:#9A9280; --w-chip:#252118;
  --w-marca-10:#8A8374; --w-marca-5:#6B6455; --w-marca-1:#4A4438;
  --w-regla-texto:#8A8374;
  --w-eje:var(--brass); --w-eje-chip:var(--brass); --w-eje-texto:var(--brass-sobre); --w-eje-grado:#8A8374;
  --w-planeta-fondo:#221E17; --w-planeta-grado:#ABA596;
  --w-retro:#C97060; --w-cuerpo:#ABA596; --w-menor:#9A8AC0;
  --w-tinte:0.15;
  --w-overlay-solar:var(--brass); --w-overlay-otro:#5A9E7E;
  --w-overlay-fondo:#221E17; --w-overlay-texto:#F2E9D6;
  --w-tabla-diagonal:#252118; --w-barra-fondo:#2E2A21; --w-barra-defecto:#8A8374;
}


/* ============================================================================
   TEMA OSCURO DE LA PÁGINA

   Faltaba: hasta ahora "Editorial oscuro" solo cambiaba los colores de la
   rueda natal, y el resto de la app seguía clara. El botón guardaba la
   elección pero no había estilos detrás.

   La mayor parte se resuelve redefiniendo las variables del sistema, porque
   toda la app las usa. Las excepciones son los lugares donde --navy se usa
   como FONDO (botones, barra lateral) y no como color de texto: esos van
   sueltos más abajo.
   ========================================================================= */

body.tema-editorial.tema-oscuro{
  --slate-bg:#16140F;      /* fondo de la página */
  --surface:#1E1B15;       /* paneles y tarjetas */
  --line:#2E2A21;          /* bordes */
  --text-muted:#ABA596;    /* texto secundario */
  /* El acento ahora se elige por separado (ver las tres clases mas abajo:
     acento-blanco / acento-naranja / acento-plata / acento-turquesa) — esta linea deja de
     fijar un valor, para no pisar la eleccion. */
  --brass:#F0EDE6; --brass-rgb:240,237,230;         /* blanco calido, valor por defecto */
  --brass-sobre:#16140F;   /* texto oscuro que va ENCIMA del acento — sirve para los tres, son todos claros */
}
/* Los tres acentos elegibles. Se combinan con .tema-oscuro (ej. clase
   "tema-oscuro acento-naranja" en <body>) y SOLO tocan --brass/--brass-rgb —
   nada de fondos, texto general ni ningún otro rol. Por diseño, cambiar el
   acento no puede romper nada más: es la única variable que se mueve. */
body.tema-editorial.tema-oscuro.acento-blanco{ --brass:#F0EDE6; --brass-rgb:240,237,230; }
body.tema-editorial.tema-oscuro.acento-naranja{ --brass:#FF7A3D; --brass-rgb:255,122,61; }
body.tema-editorial.tema-oscuro.acento-plata { --brass:#C4C9D2; --brass-rgb:196,201,210; }
body.tema-editorial.tema-oscuro.acento-turquesa{ --brass:#2FD9C9; --brass-rgb:47,217,201; }
body.tema-editorial.tema-oscuro{
  /* --navy y --navy-deep NUNCA se tocan acá: son el fondo de superficies
     que siempre fueron oscuras a propósito (sidebar, botones, tooltips, la
     barra de la carta) y ya tienen texto claro fijo encima — cambiarlas
     rompía esas superficies (quedaban claras con texto claro encima,
     ilegibles). El bug real estaba en los USOS COMO TEXTO de esas mismas
     variables (nombres de carta, pestaña activa, campos de formulario, la
     interpretación con IA...), que ahora usan --ink / --ink-strong en vez
     de --navy / --navy-deep directamente — variables nuevas, solo de
     texto, que no tocan ninguna superficie. Por defecto valen lo mismo que
     navy/navy-deep (cero cambio en claro); acá, en oscuro, sí se aclaran. */
  --ink-strong:#F2E9D6;
  --ink:#EDEAE0;
  /* El tinte suave de hover/encabezados/cajas discretas (10 lugares:
     encabezados de tabla, fila al pasar el mouse, coordenadas manuales,
     nota de precisión, tarjeta de patrón detectado, encabezado del
     aspectario...) — es lo que se veía "blanco" en Aspectos y Aspectario. */
  --soft-bg:#252118;
  --teal:#5A9E7E;
  --rust:#C97060;
  --blue:#6B96C4;
  --green:#5A9E7E;
  background:#16140F;
  color:#EDEAE0;
}

/* Títulos */
body.tema-editorial.tema-oscuro h1,
body.tema-editorial.tema-oscuro h2,
body.tema-editorial.tema-oscuro h3{ color:#F2E9D6; }
body.tema-editorial.tema-oscuro .panel-head h2{ color:#ABA596; }

/* Barra lateral: ya era oscura, pero con un tono azulado que no pega con
   esta paleta cálida. */
body.tema-editorial.tema-oscuro .sidebar{ background:#100E0A; color:#EDEAE0; }
body.tema-editorial.tema-oscuro .sidebar-foot{ color:#8A8374; border-top-color:rgba(255,255,255,.07); }

/* Botones: --navy servía de fondo, así que redefinir la variable no alcanza. */
body.tema-editorial.tema-oscuro .btn{ background:var(--brass); color:var(--brass-sobre); }
body.tema-editorial.tema-oscuro .btn:hover{ background:var(--brass); filter:brightness(1.1); }
body.tema-editorial.tema-oscuro .btn-primary{ background:var(--brass); color:var(--brass-sobre); }
body.tema-editorial.tema-oscuro .btn-primary:hover{ background:var(--brass); filter:brightness(1.1); }
body.tema-editorial.tema-oscuro .btn-ghost{
  background:transparent; color:#ABA596; border:1px solid #3A342A; }
body.tema-editorial.tema-oscuro .btn-ghost:hover{ border-color:var(--brass); color:var(--brass); }
body.tema-editorial.tema-oscuro .btn-ghost.active{ background:rgba(var(--brass-rgb),.14); color:var(--brass); border-color:var(--brass); }

/* Navegación */
body.tema-editorial.tema-oscuro .nav-link{ color:#8A8374; }
body.tema-editorial.tema-oscuro .nav-link:hover{ background:rgba(255,255,255,.045); color:#EDEAE0; }
body.tema-editorial.tema-oscuro .nav-link.active{ background:rgba(var(--brass-rgb),.14); color:var(--brass); }

/* Campos de formulario */
body.tema-editorial.tema-oscuro input,
body.tema-editorial.tema-oscuro select,
body.tema-editorial.tema-oscuro textarea{
  background:#16140F; border-color:#3A342A; color:#EDEAE0; }
body.tema-editorial.tema-oscuro input::placeholder,
body.tema-editorial.tema-oscuro textarea::placeholder{ color:#6B6455; }
body.tema-editorial.tema-oscuro input:focus,
body.tema-editorial.tema-oscuro select:focus,
body.tema-editorial.tema-oscuro textarea:focus{ border-color:var(--brass); background:#1E1B15; }
body.tema-editorial.tema-oscuro select option{ background:#1E1B15; color:#EDEAE0; }

/* Tablas: los fondos claros de encabezado y hover estaban escritos fijos. */
body.tema-editorial.tema-oscuro table.list th{ background:#252118; color:#ABA596; }
body.tema-editorial.tema-oscuro table.list tr.row-link:hover{ background:#252118; }
body.tema-editorial.tema-oscuro .efem-fila:hover{ background:#252118; }
body.tema-editorial.tema-oscuro .efem-hoy{ background:rgba(var(--brass-rgb),.07); }

/* Tarjetas de carta */
body.tema-editorial.tema-oscuro .chart-card{ background:#1E1B15; border-color:#2E2A21; }
body.tema-editorial.tema-oscuro .chart-card:hover{ border-color:var(--brass); }
body.tema-editorial.tema-oscuro .chart-card-name{ color:#F2E9D6; }
body.tema-editorial.tema-oscuro .chart-row:hover{ background:#252118; }
body.tema-editorial.tema-oscuro .chart-row-name{ color:#F2E9D6; }

/* Avatar e iniciales usaban --navy de fondo */
body.tema-editorial.tema-oscuro .initials{ background:var(--brass); color:var(--brass-sobre); }


/* ============================================================================
   CHIPS DE ASPECTO (trígono, cuadratura, conjunción, quincuncio)

   El problema real: estos chips usaban fondos rgba() fijos (pensados para
   fondo blanco) combinados con var(--blue)/var(--rust)/var(--green), y el
   quincuncio ni siquiera usaba una variable — tenía un color escrito a mano
   que nunca se pensó para tema oscuro. El resultado en oscuro: un azul
   apagado, de bajo contraste, sobre un parche igual de apagado — exactamente
   lo que se reportó como "letras azules que no se entienden".

   Se rediseñan los cuatro para CADA tema por separado, no reutilizando el
   mismo tono pensado para el otro fondo.
   ========================================================================= */
body.tema-editorial .aspect-type.trine,
body.tema-editorial .aspect-type.sextile{
  background:rgba(61,106,140,0.12); color:#2C5578;
}
body.tema-editorial .aspect-type.square,
body.tema-editorial .aspect-type.opposition{
  background:rgba(168,67,42,0.12); color:#8A3820;
}
body.tema-editorial .aspect-type.conjunction{
  background:rgba(60,122,74,0.14); color:#2E5A38;
}
body.tema-editorial .aspect-type.quincunx{
  background:rgba(154,122,31,0.16); color:#6E5518;
}

body.tema-editorial.tema-oscuro .aspect-type.trine,
body.tema-editorial.tema-oscuro .aspect-type.sextile{
  background:rgba(143,180,222,0.16); color:#9DC2EE;
}
body.tema-editorial.tema-oscuro .aspect-type.square,
body.tema-editorial.tema-oscuro .aspect-type.opposition{
  background:rgba(201,112,96,0.18); color:#E0917E;
}
body.tema-editorial.tema-oscuro .aspect-type.conjunction{
  background:rgba(90,158,126,0.18); color:#7EC29E;
}
body.tema-editorial.tema-oscuro .aspect-type.quincunx{
  background:rgba(217,164,65,0.18); color:#E8BE6F;
}


/* ============================================================================
   BOTONES DE FUNCIÓN (Planetario, Rosa de Venus, Eclipses, y los controles
   dentro de esos modos, más Exportar/Corregir/Eliminar de la carta)

   El problema real: estos 17 botones tenían fondo COMPLETAMENTE TRANSPARENTE,
   solo un borde muy tenue (opacidad .2–.35) y texto en color pastel. Dependían
   por completo de que el fondo detrás fuera oscuro para leerse. Sumado a que
   el radio de los botones pasó a redondearse del todo (ver arriba), quedaban
   como óvalos casi en blanco — que es exactamente lo que se describió como
   "círculos... en blanco con letras claras".

   La solución: un fondo propio, translúcido pero SÓLIDO, que no dependa de
   nada detrás — y esquinas rectangulares, no óvalos. Viven todos sobre fondos
   oscuros fijos (los modales y la barra de la carta no cambian con el tema),
   así que estos valores no varían entre Editorial claro y oscuro: están
   pensados para ese fondo oscuro constante.
   ========================================================================= */
body.tema-editorial #cn-universe-btn,
body.tema-editorial [data-view="natural"],
body.tema-editorial [data-view="cenital"],
body.tema-editorial [data-view="lateral"],
body.tema-editorial [data-view="cercana"],
body.tema-editorial #venus-rose-view-toggle{
  background:rgba(125,221,208,0.14) !important;
  border:1px solid rgba(125,221,208,0.4) !important;
  border-radius:6px !important;
  color:#7DDDD0 !important;
}
body.tema-editorial #cn-universe-btn:hover,
body.tema-editorial [data-view]:hover,
body.tema-editorial #venus-rose-view-toggle:hover{
  background:rgba(125,221,208,0.24) !important;
}

body.tema-editorial #cn-venus-rose-btn{
  background:rgba(77,216,200,0.14) !important;
  border:1px solid rgba(77,216,200,0.4) !important;
  border-radius:6px !important;
  color:#4DD8C8 !important;
}
body.tema-editorial #cn-venus-rose-btn:hover{ background:rgba(77,216,200,0.24) !important; }

body.tema-editorial #cn-eclipse-btn{
  background:rgba(42,157,147,0.16) !important;
  border:1px solid rgba(42,157,147,0.45) !important;
  border-radius:6px !important;
  color:#4DBDB0 !important;
}
body.tema-editorial #cn-eclipse-btn:hover{ background:rgba(42,157,147,0.26) !important; }

body.tema-editorial #cn-export-pdf-btn,
body.tema-editorial #cn-edit-btn,
body.tema-editorial #universe-aspects-toggle,
body.tema-editorial #universe-houses-toggle,
body.tema-editorial #universe-constellations-toggle,
body.tema-editorial #universe-transits-toggle{
  background:rgba(216,218,230,0.10) !important;
  border:1px solid rgba(216,218,230,0.32) !important;
  border-radius:6px !important;
  color:#D8DAE6 !important;
}
body.tema-editorial #cn-export-pdf-btn:hover,
body.tema-editorial #cn-edit-btn:hover,
body.tema-editorial #universe-aspects-toggle:hover,
body.tema-editorial #universe-houses-toggle:hover,
body.tema-editorial #universe-constellations-toggle:hover,
body.tema-editorial #universe-transits-toggle:hover{
  background:rgba(216,218,230,0.18) !important;
}

body.tema-editorial #cn-delete-btn{
  background:rgba(232,169,142,0.14) !important;
  border:1px solid rgba(232,169,142,0.4) !important;
  border-radius:6px !important;
  color:#E8A98E !important;
}
body.tema-editorial #cn-delete-btn:hover{ background:rgba(232,169,142,0.24) !important; }

body.tema-editorial #universe-close-btn,
body.tema-editorial #venus-rose-close-btn,
body.tema-editorial #ecl-close{
  background:rgba(255,255,255,0.08) !important;
  border:1px solid rgba(255,255,255,0.28) !important;
  border-radius:6px !important;
}

/* Botones activos (toggle presionado): un empuje extra de fondo, para que se
   note cuál está encendido sin depender solo del color de texto. */
body.tema-editorial .btn-ghost.active{
  background:rgba(var(--brass-rgb),0.22) !important;
}


/* ============================================================================
   PULIDO GENERAL DEL TEMA CLARO

   La base ya era sólida (paleta "Observatory", bronce envejecido, papel
   cálido), pero los paneles y tarjetas quedaban completamente planos — sin
   ninguna sombra, solo un borde de 1px. Se suma una elevación sutil, que da
   la sensación de superficie física en vez de un rectángulo dibujado.
   ========================================================================= */
body.tema-editorial .panel,
body.tema-editorial .stat-card,
body.tema-editorial .chart-card{
  box-shadow:0 1px 2px rgba(30,36,48,.04), 0 4px 14px rgba(30,36,48,.045);
  transition:box-shadow .3s cubic-bezier(.16,1,.3,1), border-color .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1);
}
body.tema-editorial .chart-card:hover{
  box-shadow:0 4px 8px rgba(30,36,48,.06), 0 12px 28px rgba(30,36,48,.08);
  transform:translateY(-1px);
}
body.tema-editorial.tema-oscuro .panel,
body.tema-editorial.tema-oscuro .stat-card,
body.tema-editorial.tema-oscuro .chart-card{
  box-shadow:0 1px 2px rgba(0,0,0,.2), 0 4px 14px rgba(0,0,0,.18);
}

/* Las cifras de las tarjetas ganan peso frente a su etiqueta */
body.tema-editorial .stat-card .value{
  letter-spacing:-0.02em;
}