/* =====================================================================
   ASTROMUNDO — sistema de diseño "Observatory"
   Instrumento de precisión, no esoterismo: líneas finas, marcas de grado,
   tipografía monoespaciada para datos, espacio generoso. Ver
   /docs (raíz del proyecto) → DISENO-VISUAL-OBSERVATORY.md para el
   racional completo de cada decisión.

   Los nombres de variables se mantienen idénticos a la versión anterior
   a propósito: decenas de componentes generan estilos inline con
   var(--brass), var(--teal), etc. Cambiar los VALORES acá alcanza para
   refinar toda la app sin tocar un solo archivo .js.
===================================================================== */

:root{
  --navy:#1E2430;        /* antes #1B2A4A — tinta, no azul marino */
  --navy-deep:#14161D;   /* antes #131E36 — sidebar y superficies oscuras */
  /* --navy y --navy-deep cumplen DOS roles distintos en la app: son texto
     en muchos lugares, pero también son el FONDO de superficies que
     siempre fueron oscuras a propósito (la barra lateral, los botones, los
     tooltips, la barra de la carta) — esas deben seguir oscuras siempre,
     con tema claro u oscuro, porque ya tienen texto claro fijo encima.
     --ink y --ink-strong son SOLO para texto: por defecto valen lo mismo
     que navy/navy-deep (cero cambio en el estilo clásico y el Editorial
     claro), pero en el Editorial oscuro se redefinen aparte, sin tocar
     navy/navy-deep y sin romper ninguna de esas superficies. */
  --ink:#1E2430;
  --ink-strong:#14161D;
  /* Tinte suave para hover de filas, encabezados de tabla y cajas discretas
     — usado en 10 lugares, todos con este mismo valor fijo hasta ahora, y
     ninguno adaptado al tema oscuro. */
  --soft-bg:var(--soft-bg);
  --slate-bg:#F7F6F2;    /* antes #EDEEF2 — papel cálido, no gris frío */
  --surface:#FFFFFF;
  --brass:#9C7A3C;       /* antes #B8863B — bronce envejecido, no dorado */
  /* Version en numeros R,G,B sueltos (sin el rgba() alrededor), para poder
     armar tintes translucidos que seguian fijos hasta ahora — rgba(var(
     --brass-rgb), 0.14) en vez de rgba(156,122,60,0.14) escrito a mano.
     Asi, cuando el acento cambie (selector de apariencia), CUALQUIER tinte
     que lo use se actualiza solo, sin tener que ir buscando cada rgba()
     suelto del proyecto. --brass-light y --brass-dark son variantes mas
     clara/oscura para texto sobre fondo translucido y estados de hover. */
  --brass-rgb:156,122,60;
  --brass-light:#EFDCB4;
  --brass-dark:#8A6A34;
  --teal:#0E4A47;        /* antes #0F5C5C — pátina de instrumento */
  --rust:#A8432A;        /* antes #B3462C */
  --blue:#3D6A8C;        /* antes #3C6E9E */
  --green:#3C7A4A;       /* antes #2E7D32 */
  --line:#E4E1D9;        /* antes #DCDEE5 — línea cálida, reemplaza sombras */
  --text-muted:#6E6C64;  /* antes #6B7280 — gris cálido */

  /* Radios y espaciado del sistema — mesa de dibujo, no burbuja de app */
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:10px;
}
*{box-sizing:border-box;}

/* Scrollbars finas, discretas -- las de sistema por defecto se sienten
   pesadas al lado de una interfaz de instrumento de precisión. Firefox usa
   las dos propiedades estándar; Chrome/Edge/Safari usan los pseudo-elementos
   -webkit-. Mismo tratamiento en toda la app, no solo en la carta natal,
   para que no se sienta inconsistente entre pantallas. */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(228,225,217,0.7);border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:var(--brass);}

body{margin:0;background:var(--slate-bg);font-family:'IBM Plex Sans',sans-serif;color:var(--ink-strong);display:flex;min-height:100vh;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:500;margin:0;letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px;}

/* ---------- Sidebar (persistente) ---------- */
.sidebar{width:224px;background:var(--navy-deep);color:#EDEEF2;padding:32px 22px;display:flex;flex-direction:column;gap:36px;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto;}
.brand{font-family:'Fraunces',serif;font-size:19px;font-weight:500;display:flex;align-items:center;gap:9px;letter-spacing:0.01em;}
/* Firma visual: anillo graduado (limbo de sextante) en vez de logo genérico */
.brand .ring{
  width:15px;height:15px;border-radius:50%;flex-shrink:0;
  background:
    repeating-conic-gradient(from 0deg, var(--brass) 0deg 3deg, transparent 3deg 30deg);
  border:1px solid var(--brass);
}
nav{display:flex;flex-direction:column;gap:2px;}
nav a{color:#9AA0AC;text-decoration:none;font-size:13.5px;padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;border-left:2px solid transparent;transition:background .12s,color .12s;}
nav a.active{background:rgba(var(--brass-rgb),0.14);color:var(--brass-light);font-weight:500;border-left-color:var(--brass);}
nav a:hover:not(.active){background:rgba(255,255,255,0.05);color:#D8DAE0;}
.sidebar-foot{margin-top:auto;display:flex;align-items:center;gap:11px;font-size:12.5px;color:#8B8F99;border-top:1px solid rgba(255,255,255,0.09);padding-top:18px;}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--brass);flex-shrink:0;}

/* ---------- Main / vistas ---------- */
main{flex:1;min-width:0;}
.view{display:none;}
.view.active{display:block;}
.page{padding:34px 40px;max-width:1220px;}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;}
.topbar h1{font-size:24px;}
.btn{background:var(--navy);color:#fff;border:none;padding:10px 18px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:500;cursor:pointer;text-decoration:none;display:inline-block;letter-spacing:0.01em;transition:background .12s;}
.btn:hover{background:var(--navy-deep);}
.btn-ghost{background:transparent;color:var(--text-muted);border:none;}
.btn-ghost.active{background:var(--navy);color:#fff;border-color:var(--navy);}
.btn-primary{background:var(--brass);color:#fff;border:none;}
.btn-primary:hover{background:var(--brass-dark);}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* Cards / panels genéricos — borde fino, sin sombra */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 28px;margin-bottom:20px;}
.panel h2{font-size:15px;margin-bottom:4px;}
.panel .hint{font-size:12px;color:var(--text-muted);margin:2px 0 18px;}

/* ---------- Dashboard ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;position:relative;}
/* Marca de grado sutil arriba de cada tarjeta — el "dial" de firma en miniatura */
.stat-card::before{content:"";position:absolute;top:0;left:20px;width:22px;height:2px;background:var(--brass);}
.stat-card.clickable{cursor:pointer;transition:border-color .12s;}
.stat-card.clickable:hover{border-color:var(--brass);}
.stat-card .label{font-size:11.5px;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.04em;}
.stat-card .value{font-family:'Fraunces',serif;font-size:24px;}
.grid-2{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;margin-bottom:20px;}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line);}
.panel-head h2{font-size:14px;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-muted);font-family:'IBM Plex Sans',sans-serif;font-weight:500;}
.panel-head a{font-size:12.5px;color:var(--teal);text-decoration:none;cursor:pointer;}
.chart-wrap{width:100%;}
.chart-tooltip{position:absolute;pointer-events:none;background:var(--navy-deep);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:11px;padding:5px 9px;border-radius:var(--radius-sm);opacity:0;transition:opacity .1s;white-space:nowrap;z-index:20;}
.appt{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center;cursor:pointer;}
.appt:last-child{border-bottom:none;}
.appt .time{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--teal);width:52px;flex-shrink:0;}
.appt .who{font-size:13.5px;font-weight:500;}
.appt .what{font-size:11.5px;color:var(--text-muted);}
.tag{margin-left:auto;font-size:10.5px;padding:3px 9px;border-radius:3px;background:rgba(14,74,71,0.1);color:var(--teal);font-weight:500;}

/* ---------- Agenda: calendario semanal ---------- */
.week-nav{display:flex;align-items:center;gap:14px;}
.week-nav h1{font-size:19px;}
.week-btn{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);width:30px;height:30px;cursor:pointer;color:var(--ink);font-size:14px;}
.agenda-legend{display:flex;gap:18px;margin:16px 0;font-size:11.5px;color:var(--text-muted);}
.agenda-legend .sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;}
.calendar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
.cal-head{display:grid;grid-template-columns:56px repeat(7,1fr);border-bottom:1px solid var(--line);}
.cal-head div{padding:11px 6px;font-size:11.5px;text-align:center;color:var(--text-muted);border-left:1px solid var(--line);}
.cal-head div:first-child{border-left:none;}
.cal-head .daynum{font-family:'Fraunces',serif;font-size:16px;color:var(--ink-strong);display:block;margin-top:2px;}
.cal-head .today{color:var(--brass);}
.cal-body{display:grid;grid-template-columns:56px repeat(7,1fr);position:relative;}
.hour-col{border-right:1px solid var(--line);}
.hour-col div{height:52px;font-size:10px;color:var(--text-muted);text-align:right;padding-right:6px;transform:translateY(-6px);font-family:'IBM Plex Mono',monospace;}
.day-col{border-left:1px solid var(--line);position:relative;}
.day-col .slot{height:52px;border-bottom:1px solid #F1EFE9;cursor:pointer;}
.day-col .slot:hover{background:var(--soft-bg);}

.cal-month-head{display:grid;grid-template-columns:repeat(7,1fr);background:var(--surface);border:1px solid var(--line);border-bottom:none;border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;}
.cal-month-head div{padding:9px 6px;font-size:11px;text-align:center;color:var(--text-muted);border-left:1px solid var(--line);}
.cal-month-head div:first-child{border-left:none;}
.cal-month-grid{display:grid;grid-template-columns:repeat(7,1fr);background:var(--surface);border:1px solid var(--line);border-radius:0 0 var(--radius-lg) var(--radius-lg);overflow:hidden;}
.cal-month-cell{min-height:92px;border-left:1px solid var(--line);border-top:1px solid var(--line);padding:6px;cursor:pointer;}
.cal-month-cell:nth-child(7n+1){border-left:none;}
.cal-month-cell:nth-child(-n+7){border-top:none;}
.cal-month-cell:hover{background:var(--soft-bg);}
.cal-month-cell .daynum{font-family:'Fraunces',serif;font-size:14px;color:var(--ink-strong);}
.cal-month-cell.outside{opacity:0.4;}
.cal-month-cell.today .daynum{color:var(--brass);font-weight:600;}
.cal-month-cell .mini-appt{font-size:10px;font-family:'IBM Plex Mono',monospace;color:var(--ink-strong);background:rgba(var(--brass-rgb),0.1);border-radius:4px;padding:1px 4px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-month-cell .mini-mas{font-size:10px;color:var(--text-muted);margin-top:2px;}
.appt-block{position:absolute;left:3px;right:3px;border-radius:var(--radius-sm);padding:5px 7px;font-size:10.5px;color:#fff;overflow:hidden;cursor:pointer;line-height:1.3;}
.appt-block .t{font-family:'IBM Plex Mono',monospace;font-size:9.5px;opacity:.85;}
.appt-block .n{font-weight:600;font-size:10.5px;}
.appt-block.confirmed{background:var(--teal);}
.appt-block.pending{background:var(--rust);}
.appt-block.async{background:var(--brass);}

/* ---------- Tablas / listas ---------- */
.toolbar{display:flex;gap:8px;margin-bottom:18px;align-items:center;flex-wrap:wrap;}
.search{flex:1;max-width:300px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 13px;font-size:13.5px;background:var(--surface);}
.search:focus{outline:none;border-color:var(--brass);}
.table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
table.list{width:100%;border-collapse:collapse;font-size:13.5px;}
table.list th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:500;padding:13px 18px;border-bottom:1px solid var(--line);background:var(--soft-bg);}
table.list td{padding:14px 18px;border-bottom:1px solid var(--line);}
table.list tr:last-child td{border-bottom:none;}
table.list tr.row-link{cursor:pointer;}
table.list tr.row-link:hover{background:var(--soft-bg);}
.client-cell{display:flex;align-items:center;gap:12px;}
.initials{width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;flex-shrink:0;}
.row-actions a{font-size:12px;color:var(--teal);text-decoration:none;}

/* ---------- Galería de cartas ---------- */
.charts-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
.mini-wheel-wrap{width:170px;height:170px;flex-shrink:0;}

.view-toggle{display:flex;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0;}
.view-toggle-btn{background:var(--surface);border:none;padding:9px 14px;font-size:12px;color:var(--text-muted);cursor:pointer;border-left:1px solid var(--line);}
.view-toggle-btn:first-child{border-left:none;}
.view-toggle-btn.active{background:var(--navy);color:#fff;}

.charts-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;}
.chart-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;cursor:pointer;transition:border-color .12s;}
.chart-card:hover{border-color:var(--brass);}
.chart-card-wheel{width:150px;height:150px;margin:0 auto 14px;}
.chart-card-type{font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--brass);font-weight:600;text-align:center;margin-bottom:4px;}
.chart-card-type.natal{color:var(--teal);}
.chart-card-name{font-family:'Fraunces',serif;font-size:16px;color:var(--ink-strong);text-align:center;margin-bottom:6px;}
.chart-card-placements{font-size:11.5px;color:var(--text-muted);text-align:center;margin-bottom:12px;}
.chart-card-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:11px;font-size:10.5px;color:var(--text-muted);font-family:'IBM Plex Mono',monospace;}
.chart-card-delete{background:none;border:none;color:#C9CBD4;cursor:pointer;font-size:14px;padding:2px 5px;}
.chart-card-delete:hover{color:var(--rust);}
.chart-row{display:flex;align-items:center;gap:22px;padding:18px 24px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s;}
.chart-row:last-child{border-bottom:none;}
.chart-row:hover{background:var(--soft-bg);}
.chart-row-wheel{width:64px;height:64px;flex-shrink:0;}
.chart-row-main{flex:1;min-width:0;}
.chart-row-type{font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--brass);font-weight:600;margin-bottom:3px;}
.chart-row-type.natal{color:var(--teal);}
.chart-row-name{font-family:'Fraunces',serif;font-size:17px;color:var(--ink-strong);margin-bottom:4px;}
.chart-row-placements{font-size:12px;color:var(--text-muted);}
.chart-row-placements .glyph-inline{font-family:'Noto Sans Symbols 2','Segoe UI Symbol',sans-serif;}
.chart-row-side{display:flex;align-items:center;gap:16px;flex-shrink:0;}
.chart-row-date{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-muted);white-space:nowrap;}
.chart-row-delete{background:none;border:none;color:#C9CBD4;cursor:pointer;font-size:15px;padding:4px 6px;line-height:1;opacity:0;transition:opacity .12s,color .12s;}
.chart-row:hover .chart-row-delete{opacity:1;}
.chart-row-delete:hover{color:var(--rust);}
.charts-empty{padding:48px 24px;text-align:center;color:var(--text-muted);font-size:13px;}

/* ---------- Nueva carta (formulario) ---------- */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.field-row.three{grid-template-columns:1fr 1fr 1fr;}
.field{margin-bottom:14px;}
label{display:block;font-size:11.5px;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.03em;}
input[type=text],input[type=date],input[type=time],select{width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;font-size:13.5px;font-family:'IBM Plex Sans',sans-serif;color:var(--ink-strong);background:var(--surface);}
input:focus,select:focus{outline:none;border-color:var(--brass);}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-muted);margin-top:-6px;margin-bottom:14px;}
.checkbox-row input{width:auto;}
.place-wrap{position:relative;}
.place-suggestions{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);margin-top:4px;box-shadow:0 8px 20px rgba(20,22,29,0.08);z-index:5;display:none;overflow:hidden;max-height:260px;overflow-y:auto;}
.place-suggestions.visible{display:block;}
.place-option{padding:10px 12px;font-size:13px;cursor:pointer;display:flex;justify-content:space-between;}
.ag-client-option:hover{background:rgba(var(--brass-rgb),0.1);}
.place-option:hover{background:var(--soft-bg);}
.place-option .tz{font-size:11px;color:var(--text-muted);font-family:'IBM Plex Mono',monospace;}
.place-confirmed{display:none;align-items:center;gap:10px;background:rgba(14,74,71,0.05);border:1px solid rgba(14,74,71,0.18);border-radius:var(--radius-sm);padding:10px 12px;font-size:12.5px;margin-top:8px;}
.place-confirmed.visible{display:flex;}
.place-confirmed .coords{margin-left:auto;color:var(--text-muted);font-family:'IBM Plex Mono',monospace;font-size:11px;}
.place-empty{display:none;padding:10px 12px;font-size:12.5px;color:var(--text-muted);}
.place-empty.visible{display:block;}
.place-empty button{background:none;border:none;color:var(--teal);font-weight:500;cursor:pointer;text-decoration:underline;padding:0;font-size:12.5px;}
.manual-coords{display:none;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:8px;background:var(--soft-bg);border:1px dashed var(--line);border-radius:var(--radius-sm);padding:12px;}
.manual-coords.visible{display:grid;}
.unknown-time-note{display:none;font-size:12px;color:var(--brass);background:rgba(var(--brass-rgb),0.08);border:1px solid rgba(var(--brass-rgb),0.22);border-radius:var(--radius-sm);padding:10px 12px;margin-top:6px;}
.unknown-time-note.visible{display:block;}
.type-options{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.type-option{border:1px solid var(--line);border-radius:var(--radius-md);padding:13px 10px;text-align:center;cursor:pointer;font-size:12.5px;transition:border-color .12s;}
.type-option:hover{border-color:var(--brass);}
.type-option.selected{border-color:var(--brass);background:rgba(var(--brass-rgb),0.06);font-weight:500;}
.type-option .icon{font-size:18px;display:block;margin-bottom:7px;}
.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:10px;}
.precision-note{display:flex;gap:10px;background:var(--soft-bg);border:1px solid var(--line);border-radius:var(--radius-md);padding:13px 15px;font-size:12px;color:var(--text-muted);line-height:1.65;margin-top:4px;}
.precision-note .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex-shrink:0;margin-top:6px;}

/* ---------- Carta natal (detalle) ---------- */
.cn-layout{display:grid;grid-template-columns:640px 1fr;gap:0;}
.cn-topbar{background:var(--navy-deep);color:#EDEEF2;padding:18px 34px;display:flex;justify-content:space-between;align-items:center;}
.cn-topbar .back{color:#9AA0AC;text-decoration:none;font-size:12.5px;cursor:pointer;}
.cn-client-name{font-family:'Fraunces',serif;font-size:17px;}
.cn-client-meta{font-size:11.5px;color:#9AA0AC;}
.chart-col{background:var(--surface);border-right:1px solid var(--line);padding:28px;display:flex;flex-direction:column;align-items:center;position:sticky;top:0;align-self:start;max-height:100vh;overflow-y:auto;}
.chart-controls{display:flex;gap:8px;margin-bottom:18px;font-size:12px;width:100%;flex-wrap:wrap;}
.chart-controls .pill{padding:6px 13px;border-radius:20px;border:1px solid var(--line);color:var(--text-muted);cursor:pointer;user-select:none;background:var(--surface);transition:border-color .12s;}
.chart-controls .pill.active{background:var(--navy);color:#fff;border-color:var(--navy);}
.chart-controls .pill.minor-pill.active{background:var(--teal);border-color:var(--teal);}
.wheel-wrap{position:relative;border-radius:var(--radius-lg);touch-action:none;}
.wheel-wrap.pannable{cursor:grab;}
.wheel-wrap.panning{cursor:grabbing;}
#cn-wheel{transition:transform .15s cubic-bezier(.16,1,.3,1);will-change:transform;}
.wheel-wrap.panning #cn-wheel{transition:none;}
.wheel-zoom{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:3px;z-index:5;}
.wheel-zoom button{width:28px;height:28px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--surface);color:var(--text-muted);font-size:15px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s,background .2s;}
.wheel-zoom button:hover{border-color:var(--brass);color:var(--brass);}
.wheel-zoom button:active{transform:scale(.94);}
#cn-zoom-reset{font-size:13px;}
#tooltip{position:absolute;pointer-events:none;background:var(--navy-deep);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:11px;padding:6px 10px;border-radius:var(--radius-sm);opacity:0;transition:opacity .1s;white-space:nowrap;z-index:10;transform:translate(-50%,-130%);}
.legend{margin-top:18px;width:100%;font-size:11px;color:var(--text-muted);display:grid;grid-template-columns:1fr 1fr;gap:7px 14px;}
.legend span{display:flex;align-items:center;gap:6px;}
.legend .swatch{width:14px;height:2px;flex-shrink:0;}
.data-table{width:100%;margin-top:20px;font-size:12.5px;border-collapse:collapse;}
.data-table th{text-align:left;color:var(--text-muted);font-weight:500;font-size:10.5px;text-transform:uppercase;letter-spacing:0.03em;padding-bottom:7px;border-bottom:1px solid var(--line);}
.data-table td{padding:7px 4px;border-bottom:1px solid var(--line);}
.glyph{font-size:14px;width:20px;display:inline-block;}
.info-col{padding:28px 36px;}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px;flex-wrap:wrap;}
.tab{padding:10px 4px;margin-right:24px;font-size:13px;color:var(--text-muted);border-bottom:2px solid transparent;cursor:pointer;text-transform:uppercase;letter-spacing:0.03em;font-weight:500;}
.tab.active{color:var(--ink-strong);border-bottom-color:var(--brass);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.block{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 22px;margin-bottom:15px;}
.block-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;}
.block-head h3{font-size:14px;}
.ai-badge{font-size:10px;background:rgba(var(--brass-rgb),0.12);color:var(--brass);padding:2px 8px;border-radius:3px;font-weight:500;text-transform:uppercase;letter-spacing:0.03em;}
.block p{font-size:13.5px;line-height:1.7;color:#2B2E38;margin:0;}
.aspect-color-key{font-size:11px;color:var(--text-muted);margin:0 0 18px;line-height:1.7;}
.aspect-color-key span.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;}
.aspect-grid-title{font-size:12px;color:var(--text-muted);margin:24px 0 11px;text-transform:uppercase;letter-spacing:0.04em;}
.aspect-grid-title:first-child{margin-top:0;}
.aspect-list{display:flex;flex-direction:column;gap:7px;}
.aspect-row{display:flex;align-items:center;gap:10px;font-size:12.5px;flex-wrap:wrap;row-gap:5px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 12px 9px 34px;position:relative;}
.aspect-toggle{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:13px;height:13px;accent-color:var(--ink);}
.aspect-row.inactive{opacity:0.4;}
.aspect-names{flex:1 1 auto;min-width:100px;}
.aspect-gloss{display:block;font-size:10.5px;color:var(--text-muted);}
.aspect-meta{display:flex;align-items:center;gap:7px;margin-left:auto;flex-shrink:0;}
.aspect-type{font-size:10.5px;padding:2px 8px;border-radius:3px;font-weight:500;white-space:nowrap;}
.aspect-type.trine,.aspect-type.sextile{background:rgba(61,106,140,0.1);color:var(--blue);}
.aspect-type.square,.aspect-type.opposition{background:rgba(168,67,42,0.1);color:var(--rust);}
.aspect-type.conjunction{background:rgba(60,122,74,0.12);color:var(--green);}
.aspect-type.quincunx{background:rgba(var(--brass-rgb),0.16);color:var(--brass-dark);}
.aspect-motion{font-size:9.5px;padding:1px 7px;border-radius:3px;white-space:nowrap;background:rgba(110,108,100,0.12);color:var(--text-muted);}
.aspect-motion.applying{background:rgba(var(--brass-rgb),0.14);color:var(--brass);}
.aspect-orb{color:var(--text-muted);font-size:11px;white-space:nowrap;}
.patterns-wrap{display:flex;flex-direction:column;gap:8px;margin-bottom:6px;}
.pattern-card{display:flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:var(--radius-md);padding:12px 14px;background:var(--soft-bg);}
.pattern-icon{width:30px;height:30px;border-radius:var(--radius-sm);background:rgba(30,36,48,0.06);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.pattern-title{font-size:12.5px;font-weight:600;}
.pattern-sub{font-size:11px;color:var(--text-muted);}
.pattern-empty{font-size:12px;color:var(--text-muted);}
table.aspectario{border-collapse:collapse;font-size:10.5px;}
table.aspectario th,table.aspectario td{width:25px;height:25px;text-align:center;border:1px solid var(--line);}
table.aspectario th{background:var(--soft-bg);font-size:10px;}
.aspectario-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px;}
.houses-warning{background:rgba(var(--brass-rgb),0.1);border:1px solid rgba(var(--brass-rgb),0.3);color:var(--brass);font-size:12px;padding:10px 13px;border-radius:var(--radius-sm);margin-bottom:14px;width:100%;display:none;}

/* ---------- Pagos y suscripciones ---------- */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:26px;}
.plan-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px;position:relative;}
.plan-argumento{font-size:12.5px;color:var(--brass);font-weight:600;margin:6px 0 14px;line-height:1.4;}
.plan-card.current{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass);}
.plan-card .badge-current{position:absolute;top:-10px;right:18px;background:var(--brass);color:#fff;font-size:10px;font-weight:600;padding:3px 10px;border-radius:3px;text-transform:uppercase;letter-spacing:0.03em;}
.plan-card h3{font-size:15px;margin-bottom:3px;}
.plan-card .price{font-family:'Fraunces',serif;font-size:25px;margin:9px 0 16px;}
.plan-card .price span{font-size:12px;color:var(--text-muted);font-family:'IBM Plex Sans',sans-serif;}
.plan-card ul{list-style:none;padding:0;margin:0;font-size:12.5px;color:var(--text-muted);display:flex;flex-direction:column;gap:8px;}
.plan-card ul li{display:flex;gap:8px;}
.plan-card ul li::before{content:"—";color:var(--brass);font-weight:700;flex-shrink:0;}
.plan-card-recomendado{border-color:var(--brass);box-shadow:0 8px 24px rgba(var(--brass-rgb),0.14);}
.plan-badge{position:absolute;top:-10px;left:18px;background:var(--navy);color:#fff;font-size:10px;font-weight:600;
  padding:3px 10px;border-radius:3px;text-transform:uppercase;letter-spacing:0.03em;}

.pay-method-row{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);}
.pay-method-row:last-child{border-bottom:none;}
.pay-icon{width:36px;height:36px;border-radius:var(--radius-sm);background:rgba(14,74,71,0.1);color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.pay-status{margin-left:auto;font-size:10.5px;padding:3px 10px;border-radius:3px;background:rgba(14,74,71,0.1);color:var(--teal);font-weight:500;}

table.tx-table{width:100%;border-collapse:collapse;font-size:13px;}
table.tx-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:500;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--soft-bg);}
table.tx-table td{padding:13px 16px;border-bottom:1px solid var(--line);}
table.tx-table tr:last-child td{border-bottom:none;}
.tx-status{font-size:10.5px;padding:2px 9px;border-radius:3px;font-weight:500;}
.tx-status.approved{background:rgba(14,74,71,0.1);color:var(--teal);}
.tx-status.pending{background:rgba(var(--brass-rgb),0.14);color:var(--brass);}

/* ---------- Servicios ---------- */
.service-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:17px 19px;margin-bottom:10px;display:flex;align-items:center;gap:16px;}
.service-card.inactive{opacity:.5;}
.service-icon{width:36px;height:36px;border-radius:var(--radius-sm);background:rgba(var(--brass-rgb),0.1);color:var(--brass);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.service-main{flex:1;min-width:0;}
.service-main h3{font-size:14px;margin-bottom:3px;}
.service-meta{font-size:11.5px;color:var(--text-muted);display:flex;gap:10px;flex-wrap:wrap;}
.service-price{font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--ink);white-space:nowrap;}
.service-actions{display:flex;gap:6px;align-items:center;flex-shrink:0;}
.service-actions button{background:none;border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px 11px;font-size:11.5px;cursor:pointer;color:var(--text-muted);}
.service-actions button:hover{border-color:var(--brass);color:var(--brass);}
.service-actions button.danger:hover{border-color:var(--rust);color:var(--rust);}

.modality-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
.modality-option{border:1px solid var(--line);border-radius:var(--radius-md);padding:11px 8px;text-align:center;cursor:pointer;font-size:12px;transition:border-color .12s;}
.modality-option:hover{border-color:var(--brass);}
.modality-option.selected{border-color:var(--brass);background:rgba(var(--brass-rgb),0.06);font-weight:500;}

/* ============================================================
   MÓVIL — primera pasada: la base del layout (barra lateral,
   ancho del contenido). Las vistas individuales más densas
   (la rueda de la carta, tablas, Planetario) necesitan su
   propio ajuste aparte, esto no las resuelve solas.
   ============================================================ */
#mobile-topbar{display:none;}
#mobile-tabbar{display:none;}
#mobile-more-overlay{display:none;}
#mobile-more-sheet{display:none;}

/* ---------- Mapa de nacimientos — globo + panel lateral ---------- */
.mapa-layout{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start;}
.mapa-globe{width:100%;height:600px;background:#e8e6e0;}

@media (max-width: 860px){
  .page{padding:60px 16px 90px;max-width:100%;}

  /* La barra lateral de escritorio queda eliminada del todo en celular —
     ni oculta con transform (eso ya lo intenté, y algo en la cascada la
     seguía mostrando), display:none puro y con !important para que nada
     que cargue después pueda revivirla por accidente. */
  .sidebar{display:none !important;}

  #mobile-topbar{
    display:flex;align-items:center;gap:14px;position:fixed;top:0;left:0;right:0;z-index:40;
    background:var(--navy-deep);color:#EDEEF2;padding:14px 16px;
  }

  /* ---------- Barra inferior — la navegación principal en celular ---------- */
  /* Patrón de app de verdad (Instagram, apps de banco), no un menú que se
     abre y tapa la pantalla: los 4 accesos más usados siempre a mano con
     el pulgar, "Más" para el resto. z-index por debajo de 100 por la
     misma razón que el resto — los modales (Planetario, Eclipses, Rosa de
     Venus) usan 100, la navegación nunca puede quedar por encima. */
  #mobile-tabbar{
    display:flex;flex-direction:row;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--navy-deep);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 20px rgba(0,0,0,.25);
  }
  .mtab,#mtab-mas{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:7px 2px;color:#9198AC;text-decoration:none;font-size:10px;
    background:none;border:none;font-family:inherit;cursor:pointer;
    border-radius:10px;transition:color .15s;
  }
  .mtab-ic{font-size:19px;line-height:1;}
  .mtab.active,#mtab-mas.active{color:#EDEEF2;}
  .mtab:active,#mtab-mas:active{background:rgba(255,255,255,.06);}

  /* La hoja de "Más" — desliza desde abajo, no un menú lateral. */
  #mobile-more-overlay{
    display:none;position:fixed;inset:0;z-index:45;background:rgba(10,10,14,.5);
  }
  #mobile-more-overlay.activo{display:block;}
  #mobile-more-sheet{
    display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;z-index:46;
    background:var(--surface);border-radius:18px 18px 0 0;
    padding:10px 8px calc(14px + env(safe-area-inset-bottom));
    transform:translateY(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);
    box-shadow:0 -8px 40px rgba(0,0,0,.3);max-height:70vh;overflow-y:auto;
  }
  #mobile-more-sheet.abierta{transform:translateY(0);}
  .mmore-handle{width:36px;height:4px;border-radius:2px;background:var(--line);margin:2px auto 12px;}
  .mmore-link{display:block;padding:14px 18px;color:var(--ink-strong);text-decoration:none;font-size:15px;border-radius:10px;}
  .mmore-link:active{background:var(--soft-bg);}
  .mmore-sep{height:1px;background:var(--line);margin:8px 10px;}

  main{width:100%;min-width:0;}

  /* ---------- Que se sienta una app, no un sitio de escritorio achicado ---------- */

  /* Sin esto, iOS Safari hace zoom automático a toda la pantalla cada vez
     que tocás un campo de texto (activa el zoom si el font-size es menor
     a 16px) — es EL detalle clásico que delata un sitio no pensado para
     mobile, aunque todo lo demás esté bien. */
  input[type=text],input[type=date],input[type=time],input[type=email],
  input[type=password],input[type=number],select,textarea{font-size:16px;}

  /* Objetivos de toque más generosos — los 44px mínimos que recomiendan
     tanto Apple como Google para no fallar el tap con el dedo. */
  .nav-link{padding:13px 10px;font-size:15px;}
  .btn,.btn-primary,.btn-ghost{min-height:44px;padding-top:11px;padding-bottom:11px;}
  table.list td,table.list th{padding:12px 14px;}
  .chart-row{padding:16px 18px;}

  /* Grillas fijas de columnas -> apiladas o reducidas. Cada una elegida
     según cuánto contenido tiene cada celda, no una regla única para
     todas: los stat-card son chicos, quedan bien de a 2; un field-row es
     texto de formulario, se lee mejor apilado entero. */
  .stats{grid-template-columns:1fr 1fr;gap:10px;}
  .stat-card .value{font-size:20px;}
  .grid-2{grid-template-columns:1fr;}
  .field-row,.field-row.three{grid-template-columns:1fr;gap:0;}
  .manual-coords{grid-template-columns:1fr;}
  .type-options{grid-template-columns:1fr 1fr;}
  .plan-grid{grid-template-columns:1fr;}
  .modality-options{grid-template-columns:1fr;}

  /* Tablas y el calendario semanal no se apilan bien — siguen anchos,
     pero contenidos en su propio scroll horizontal en vez de romper el
     layout general de la página (que nadie tenga que hacer scroll lateral
     de TODA la pantalla por una sola tabla ancha). */
  .cal-head,.cal-body{min-width:640px;}
  .calendar{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table.list{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}

  /* La rueda de la carta: de una columna fija de 640px (más ancha que
     cualquier celular) a una sola columna donde el SVG se achica con la
     pantalla — tiene viewBox, así que escala proporcional sin recortarse. */
  .cn-layout{grid-template-columns:1fr;}
  /* .chart-col estaba pensado para ser la columna IZQUIERDA fija al lado
     de .info-col en escritorio — por eso el sticky/scroll propio con
     max-height:100vh. Apilado en una sola columna eso no tiene sentido
     (competía con el scroll normal de la página, ahí es donde se sentía
     la superposición) y el padding de 28px, sumado al de .page, dejaba
     muy poco lugar real para el SVG. */
  .chart-col{position:static;max-height:none;overflow-y:visible;padding:14px;}
  .info-col{padding:14px;}
  #cn-wheel{width:100%;height:auto;max-width:100%;display:block;margin:0 auto;}
  /* view-carta-natal no usa .page (tiene su propio encabezado, .cn-topbar,
     pegado arriba de todo) — por eso no recibió el padding-top de arriba
     junto con el resto de las vistas, y quedaba tapado por la barra fija. */
  .cn-topbar{padding-top:calc(18px + 54px);flex-wrap:wrap;gap:10px;}
  .cn-topbar > div{flex-wrap:wrap !important;}
  .cn-topbar .btn{font-size:12px !important;padding:8px 10px !important;}
  /* Mismo caso que .cn-topbar arriba: view-efemerides tampoco usa .page,
     así que tampoco recibió el padding-top del resto de las vistas. */
  #view-efemerides{padding:calc(18px + 54px) 16px 90px;}

  /* El Planetario, Eclipses y Rosa de Venus tienen paneles de botones
     puestos con estilos en línea en el HTML (no clases) — para pisarlos
     hace falta !important, no hay otra forma sin reescribir el HTML.
     El problema real: ocho botones en una sola fila sin envolver, hechos
     para una pantalla ancha de escritorio — en celular se salían o se
     superponían con el botón de cerrar (arriba a la derecha). */
  #universe-view-buttons{flex-wrap:wrap !important;max-width:calc(100vw - 88px) !important;gap:6px !important;}
  #universe-view-buttons .btn-ghost{font-size:10.5px !important;padding:5px 9px !important;}

  /* Mismo problema en Eclipses: cuatro paneles en las cuatro esquinas,
     dos con ancho fijo de casi 300px — en 375px de pantalla casi no
     queda margen sin que se toquen. Se angostan y se acercan más al
     borde real de la pantalla. */
  #eclipse-modal .ecl-panel{width:min(288px,52vw) !important;left:14px !important;padding:16px 16px !important;}
  #eclipse-modal .ecl-status{right:14px !important;}
  #eclipse-modal .ecl-status .ecl-val{font-size:30px !important;}
  #eclipse-modal .ecl-picker{width:min(274px,52vw) !important;right:14px !important;}
  #eclipse-modal #ecl-views{left:14px !important;}
  #eclipse-modal #ecl-views button{font-size:11px !important;padding:8px 12px !important;}

  /* El mapa tenía un panel lateral de ancho FIJO (320px) al lado del
     globo — en una pantalla angosta eso dejaba casi nada de espacio
     real para el globo mismo, empujándolo chico y al costado. En
     celular se apila: el globo arriba, a todo el ancho, el panel de
     lugares abajo. */
  .mapa-layout{grid-template-columns:1fr;gap:16px;}
  .mapa-globe{height:380px;}
}

/* Selector de idioma dentro de la app ya logueada (barra lateral y panel
   "Más" de celular) -- mismo concepto que el de la portada pública, con
   su propia clase porque acá vive dentro de estilos ya existentes, no
   de #view-auth. */
.app-idioma-op{color:#8B8F99;}
.app-idioma-op.activo{color:#EFECE4;font-weight:600;}
.app-idioma-op:hover{color:var(--brass);}

/* Pantalla chica de "llegaste al límite de tu plan" -- ver
   services/upgradePrompt.js. Reusa las variables de diseño existentes
   (--navy, --brass, --radius-lg) para no introducir un estilo nuevo. */
.upgrade-prompt-overlay{position:fixed;inset:0;background:rgba(20,24,32,0.55);z-index:900;
  display:flex;align-items:center;justify-content:center;padding:20px;}
.upgrade-prompt-card{background:var(--surface);border-radius:var(--radius-lg);padding:32px 28px;
  max-width:360px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.25);}
.upgrade-prompt-icon{font-size:22px;color:var(--brass);margin-bottom:12px;}
.upgrade-prompt-msg{font-size:13.5px;line-height:1.6;color:var(--ink-strong);margin:0 0 20px;}
.upgrade-prompt-actions{display:flex;gap:10px;justify-content:center;}