:root { --primary:#ff5c35; --bg:#f8fafc; --surface:#fff; --t1:#0f172a; --t2:#64748b; --t3:#94a3b8; --line:rgba(15,23,42,.08); --real:#0f172a; --prev:#2a78d6; --pipe:#cbd5e1; --ok:#1baf7a; --warn:#eda100; --bad:#e34948; color-scheme: light }
@media (prefers-color-scheme: dark) { :root { --bg:#0b1120; --surface:#111a2e; --t1:#e2e8f0; --t2:#94a3b8; --t3:#64748b; --line:rgba(226,232,240,.08); --real:#e2e8f0; --prev:#3987e5; --pipe:#334155; color-scheme: dark } }
* { box-sizing: border-box }
body { margin: 0; font-family: Inter, system-ui, sans-serif; background: var(--bg); color: var(--t1); background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 32px 32px }
.cab { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 24px; background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); flex-wrap: wrap }
.marca { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px }
.marca b { color: var(--primary); font-weight: 800 }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px var(--primary) }
.etq { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--t2); border: 1px solid var(--line); border-radius: 99px; padding: 3px 8px }
.controles { display: flex; gap: 12px; align-items: center }
.seg { display: flex; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px }
.seg button { border: 0; background: none; color: var(--t2); font: 600 12px Inter; padding: 6px 10px; border-radius: 8px; cursor: pointer }
.seg button.on { background: var(--surface); color: var(--primary); box-shadow: 0 1px 2px rgba(0,0,0,.06) }
.anon { font-size: 12px; font-weight: 600; color: var(--t2); display: flex; gap: 6px; align-items: center }
main { max-width: 1320px; margin: 0 auto; padding: 20px 24px 60px }
.aviso { font-size: 12px; color: var(--t2); margin: 0 0 16px }
.tarjeta { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; margin-bottom: 16px; box-shadow: 0 4px 6px -1px rgba(0,0,0,.02) }
.tit { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px }
.tit h2 { margin: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800 }
.sub { font-size: 12px; color: var(--t2) }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px }
.kpi.oscura { background: #0f172a; color: #fff; border-color: #0f172a }
.kpi .k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--t2) }
.kpi.oscura .k { color: var(--primary) }
.kpi .v { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 2px; font-variant-numeric: tabular-nums }
.kpi .d { font-size: 12px; color: var(--t2) }
.kpi.oscura .d { color: #cbd5e1 }
.grafico { height: 340px } .grafico.bajo { height: 260px }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.alertas li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px }
.alertas .g { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-radius: 99px; padding: 2px 8px; white-space: nowrap }
.g.alta { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad) }
.g.media { background: color-mix(in srgb, var(--warn) 18%, transparent); color: #9a6700 }
.g.info { background: color-mix(in srgb, var(--prev) 14%, transparent); color: var(--prev) }
.filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px }
.filtros button { border: 1px solid var(--line); background: var(--surface); color: var(--t2); font: 600 12px Inter; padding: 5px 10px; border-radius: 99px; cursor: pointer }
.filtros button.on { border-color: var(--primary); color: var(--primary) }
.tabla-scroll { overflow-x: auto }
.tabla { width: 100%; border-collapse: collapse; font-size: 12.5px }
.tabla th { text-align: left; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--t2); padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap }
.tabla td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top }
.tabla td.n, .tabla th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
.tabla .p { font-weight: 600 } .tabla .c { font-size: 11px; color: var(--t2) }
.chip { font-size: 11px; font-weight: 700; border-radius: 99px; padding: 2px 8px; white-space: nowrap; background: var(--bg); border: 1px solid var(--line) }
.chip.deja_de_pagar { color: var(--bad) } .chip.pasa_a_cuota, .chip.cuota { color: var(--ok) } .chip.implantacion { color: var(--prev) } .chip.renovacion { color: #9a6700 }
.revisar { font-size: 11px; color: #9a6700; margin-top: 3px }
.acceso { max-width: 380px; margin: 60px auto }
.acceso label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--t2); margin-bottom: 10px }
.acceso input { font: 14px Inter; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--t1) }
.acceso button { width: 100%; border: 0; background: var(--primary); color: #fff; font: 700 14px Inter; padding: 10px; border-radius: 10px; cursor: pointer }
.error { color: var(--bad); font-size: 13px }
@media (max-width: 760px) { .dos { grid-template-columns: 1fr } main { padding: 14px 16px 40px } .cab { padding: 10px 16px } .grafico { height: 280px } }
.qr { display: flex; justify-content: center; margin: 10px 0; background: #fff; border-radius: 12px; padding: 10px }
.qr svg { width: 220px; height: 220px }
pre { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px; font-size: 14px; line-height: 1.7; text-align: center }
code { font-size: 12px; word-break: break-all }
.ajuste { display: flex; gap: 4px; flex-wrap: wrap; align-items: center }
.ajuste select, .ajuste input { font: 12px Inter; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--t1) }
.ajuste input[type=number] { width: 80px }
.ajuste button { font: 700 12px Inter; border: 0; background: var(--primary); color: #fff; border-radius: 8px; padding: 5px 9px; cursor: pointer }
.nav { display: flex; gap: 2px; flex-wrap: wrap }
.nav a { font-size: 13px; font-weight: 600; color: var(--t2); text-decoration: none; padding: 6px 10px; border-radius: 8px }
.nav a.on { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent) }
.nav a:hover { color: var(--t1) }
@media (max-width: 760px) { .nav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap } .nav a { white-space: nowrap } }
/* Calendario de pago (mes 13) en la tabla de proyectos */
.boton-cal { font: 700 12px Inter; border: 1px solid var(--line); background: var(--surface); color: var(--t1); border-radius: 8px; padding: 5px 10px; cursor: pointer; white-space: nowrap }
.boton-cal:hover, .boton-cal.on { border-color: var(--primary); color: var(--primary) }
.fila-cal > td { background: color-mix(in srgb, var(--primary) 4%, var(--surface)); border-bottom: 1px solid var(--line) }
.calendario { display: grid; gap: 10px; padding: 4px 2px }
.cal-pasos { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start }
.cal-paso { display: grid; gap: 6px; font-size: 12px; margin: 0; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); min-width: 200px }
.cal-paso > span, .cal-paso legend { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--t2); padding: 0 }
fieldset.cal-paso label { display: flex; gap: 6px; align-items: center; font-size: 13px; flex-wrap: wrap }
.calendario select, .calendario input[type=number] { font: 13px Inter; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--t1) }
.calendario input[type=number] { width: 110px }
.cal-resumen { color: var(--t1); font-weight: 600; margin: 0 }
.cal-acciones { display: flex; gap: 8px }
.cal-acciones button { font: 700 13px Inter; border: 0; background: var(--primary); color: #fff; border-radius: 8px; padding: 7px 14px; cursor: pointer }
.cal-acciones button.secundario { background: none; color: var(--t2); border: 1px solid var(--line) }
.cal-acciones button:disabled { opacity: .6; cursor: default }
@media (max-width: 760px) { .cal-paso { min-width: 0; width: 100% } }
.calendario .error:empty { display: none }
/* En pantallas estrechas la tabla se desplaza en horizontal: el formulario se queda fijo a la vista. */
.fila-cal .calendario { position: sticky; left: 8px; max-width: calc(100vw - 88px) }
/* Clases de recurrente: mismos colores en Resumen y Recurrente */
:root { --rec-cuota: #008300; --rec-alquiler: #4a3aa7 }
@media (prefers-color-scheme: dark) { :root { --rec-alquiler: #9085e9 } }
.cal-euros { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t2) }