/* Gestor CEL · estilos comunes con el aspecto de la plataforma de propuestas:
   Poppins, verde #60bb46, barra de navegación superior translúcida, tarjetas redondeadas con sombra suave. */
:root {
  --bg: #f6f7f5; --surface: #ffffff; --ink: #1f1f1f; --muted: #6b6f72; --line: #e3e5e1; --soft: #f1f3ef;
  --accent: #60bb46; --accent-hover: #55a83f; --accent-ink: #ffffff; --accent-text: #2e7d32; --accent-soft: rgba(96, 187, 70, 0.16);
  --sun: #e9a93b; --warn: #c8611f; --ok: #2e7d32; --bad: #dc3545; --bat: #1f3a8a;
  --heat0: #eef6ea; --heat1: #4f9e39; --i1: #60bb46; --i2: #1f3a8a; --i3: #9a5bb0;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
  --f-display: Poppins, "Segoe UI", system-ui, sans-serif;
  --f-body: Poppins, "Segoe UI", system-ui, sans-serif;
  --f-data: Poppins, "Segoe UI", system-ui, sans-serif;
  --r: 1.25rem; --r-sm: .5rem;
  --c-cons: #dcdcdc; --c-prod: #c5e1b3; --c-auto: #1fb25a; --c-ch: #bcdcf2; --c-dis: #2f7bc0;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #22252a; --surface: #2a2e35; --ink: rgba(255, 255, 255, 0.92); --muted: #b6c0d1; --line: #3b414b; --soft: #31353d;
  --accent-text: #8fd47a; --accent-soft: rgba(96, 187, 70, 0.2); --sun: #f0b64a; --warn: #e08a52; --ok: #8fd47a; --bad: #ef7d88; --bat: #8ea5e6;
  --heat0: #2f3a30; --heat1: #60bb46; --i2: #8ea5e6; --i3: #c793d9; --shadow: 0 12px 32px rgba(0, 0, 0, 0.35); --c-cons: #4a4f57; --c-prod: #4d6b3c; --c-auto: #2fc56c; --c-ch: #3d5f7d; --c-dis: #5aa0e0; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #22252a; --surface: #2a2e35; --ink: rgba(255, 255, 255, 0.92); --muted: #b6c0d1; --line: #3b414b; --soft: #31353d;
  --accent-text: #8fd47a; --accent-soft: rgba(96, 187, 70, 0.2); --sun: #f0b64a; --warn: #e08a52; --ok: #8fd47a; --bad: #ef7d88; --bat: #8ea5e6;
  --heat0: #2f3a30; --heat1: #60bb46; --i2: #8ea5e6; --i3: #c793d9; --shadow: 0 12px 32px rgba(0, 0, 0, 0.35); --c-cons: #4a4f57; --c-prod: #4d6b3c; --c-auto: #2fc56c; --c-ch: #3d5f7d; --c-dis: #5aa0e0; color-scheme: dark }
* { box-sizing: border-box }
[hidden] { display: none !important }
html, body { margin: 0 }
body { background: linear-gradient(180deg, var(--surface) 0, var(--bg) 420px) no-repeat, var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 14px; line-height: 1.5; min-height: 100vh }
a { color: var(--accent-text) }
.ms { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; -webkit-font-smoothing: antialiased; vertical-align: middle; width: 1em; overflow: hidden }

/* Barra superior */
.appbar { position: sticky; top: 0; z-index: 20; padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)) }
.appbar nav { max-width: 1320px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 10px 18px; background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 18px 18px; box-shadow: var(--shadow) }
.appbar .brand { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; color: var(--ink); font-weight: 800; letter-spacing: -0.02em; font-size: 19px; margin-right: 8px }
.appbar .brand .ms { width: 34px; height: 34px; border-radius: .75rem; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 20px }
.appbar .brand b { color: var(--accent); font-weight: 800 }
.appbar .links { display: flex; flex-wrap: wrap; gap: 2px; flex: 1 1 auto }
.appbar a.nav { display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border-radius: .75rem; color: var(--muted); text-decoration: none; font-weight: 500; font-size: 14px }
.appbar a.nav:hover { color: var(--accent-text); background: var(--accent-soft) }
.appbar a.nav.on { color: var(--accent-text); background: var(--accent-soft); font-weight: 600 }
.appbar .note-local { font-size: 12px; color: var(--muted); display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; margin-left: auto }
@media (max-width: 1420px) { .appbar .note-local { display: none } }
.app-foot { position: fixed; left: 0; bottom: 0; width: 100%; height: 4px; opacity: .35; background: linear-gradient(to right, rgba(96, 187, 70, .1), var(--accent), rgba(96, 187, 70, .1)); pointer-events: none }
main.content { padding: 26px max(16px, env(safe-area-inset-right, 0px)) 70px max(16px, env(safe-area-inset-left, 0px)); max-width: 1320px; margin: 0 auto; width: 100%; display: grid; gap: 20px; align-content: start }
@media (max-width: 820px) {
  .appbar nav { padding: 8px 12px; gap: 4px 8px }
  .appbar a.nav { padding: 6px 8px; font-size: 13px }
  .appbar .note-local { display: none }
}

/* Cabeceras de página */
.pagehead { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end }
.pagehead h1 { font-family: var(--f-display); font-weight: 700; font-size: 28px; letter-spacing: -0.02em; margin: 0 }
.pagehead p { margin: 4px 0 0; color: var(--muted); max-width: 80ch }
.pagehead .grow { flex: 1 1 220px }

/* Tarjetas */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; min-width: 0; box-shadow: var(--shadow) }
.card h2 { font-family: var(--f-display); font-weight: 600; font-size: 17px; margin: 0 0 6px }
.card h3 { font-family: var(--f-display); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 14px 0 8px }
.card .lead { color: var(--muted); margin: 0 0 14px; max-width: 80ch }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 20px }

/* Subida de ficheros (zona de carga) */
.files { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px }
.drop { position: relative; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 16px 16px 76px; min-height: 84px; display: grid; gap: 4px; align-content: center; background: color-mix(in srgb, var(--soft) 60%, var(--surface)); min-width: 0; transition: background .2s, border-color .2s }
.drop::before { content: "upload_file"; font-family: "Material Symbols Outlined"; font-size: 28px; color: var(--accent); position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 1rem; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 2px 12px rgba(0, 0, 0, .06) }
.drop:hover, .drop.over { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)) }
.drop.ok { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)) }
.drop.ok::before { content: "task"; background: var(--accent-soft); border-color: transparent }
.drop b { font-weight: 600 }
.drop .fname { font-size: 12px; color: var(--muted); overflow-wrap: anywhere }
.drop input[type=file] { font-size: 12px; max-width: 100% }

/* Formularios */
.form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 18px }
.form .wide { grid-column: 1 / -1 }
.field { display: grid; gap: 5px; min-width: 0; align-content: start }
.field label { font-size: 13px; font-weight: 500; color: var(--ink) }
.field input[type=number], .field input[type=text], .field input[type=email], .field input[type=date], .field select, .field textarea, td select { font: 14px var(--f-body); padding: .45rem .75rem; border: 1px solid var(--line); border-radius: .375rem; background: var(--surface); color: var(--ink); width: 100%; transition: border-color .15s, box-shadow .15s }
td select { width: auto; padding: 2px 6px; font-size: 13px }
.field input:focus, .field select:focus, .field textarea:focus, td select:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem var(--accent-soft); outline: 0 }
.field textarea { min-height: 70px; resize: vertical }
.field input[type=number] { font-variant-numeric: tabular-nums }
input[type=checkbox], input[type=radio] { accent-color: var(--accent) }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px }
.hint { font-size: 12px; color: var(--muted) }

/* Botones */
.btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.btn { font: 500 14px var(--f-body); padding: .45rem .9rem; border-radius: .5rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; transition: background .15s, border-color .15s, color .15s }
.btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text) }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600 }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink) }
.btn.danger { color: var(--bad) }
.btn.danger:hover { background: color-mix(in srgb, var(--bad) 10%, var(--surface)); border-color: var(--bad); color: var(--bad) }
.btn.small { padding: .25rem .65rem; font-size: 13px }
.btn:disabled { opacity: .5; cursor: default; pointer-events: none }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.status { font-size: 13px; color: var(--muted); min-height: 1.4em }
.status.err { color: var(--bad) }

/* Tablas */
.tablebox { overflow: auto; max-height: 620px; border: 1px solid var(--line); border-radius: .75rem }
.tablebox.free { max-height: none }
table { border-collapse: collapse; width: 100%; font-size: 13px }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap }
th { position: sticky; top: 0; background: var(--soft); font-weight: 600; font-size: 12px; color: var(--ink); z-index: 1 }
tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, var(--surface)) }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums }
td.mono, .mono { font-variant-numeric: tabular-nums; font-size: 12.5px; letter-spacing: .01em }
tr.total td { font-weight: 600; background: var(--soft) }
table.kv td:first-child { color: var(--muted); width: 45% }
table.kv td { white-space: normal }
td .btns { flex-wrap: nowrap }

/* Etiquetas, indicadores */
.pill { display: inline-block; font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; background: var(--surface) }
.pill.ok { color: var(--accent-text); border-color: transparent; background: var(--accent-soft) }
.pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); background: color-mix(in srgb, var(--warn) 7%, var(--surface)) }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: 14px 16px; min-width: 0; box-shadow: var(--shadow) }
.tile .k { font-size: 12px; color: var(--muted); font-weight: 500 }
.tile .v { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; letter-spacing: -0.01em }
.tile .v small { font-size: 13px; color: var(--muted); font-weight: 400 }
.tile .d { font-size: 12px; color: var(--muted) }
.tile.hl { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)) }
.tile.hl .v { color: var(--accent-text) }
.radio { display: grid; gap: 8px }
.radio.row { grid-auto-flow: column; justify-content: start; gap: 18px }
.radio label { display: flex; gap: 8px; align-items: flex-start }
.note { border: 1px solid color-mix(in srgb, var(--sun) 40%, var(--line)); background: color-mix(in srgb, var(--sun) 8%, var(--surface)); padding: 12px 14px; border-radius: 1rem; font-size: 13px }
.note.bad { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); background: color-mix(in srgb, var(--bad) 7%, var(--surface)) }
.bar { height: 8px; background: var(--soft); border-radius: 4px; overflow: hidden; min-width: 80px }
.bar i { display: block; height: 100%; background: var(--accent) }
.bar i.over { background: var(--bad) }
.chart svg { width: 100%; height: auto; display: block }
.chart text { fill: var(--muted); font: 11px var(--f-data) }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin-bottom: 6px }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 5px }
.pager { display: flex; gap: 6px; align-items: center; flex-wrap: wrap }
.overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 50 }
.overlay .box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 20px 24px; min-width: 260px; max-width: 90vw; display: grid; gap: 10px }
.prog { height: 6px; background: var(--soft); border-radius: 3px; overflow: hidden }
.prog i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s }
@media (prefers-reduced-motion: reduce) { .prog i { transition: none } .btn, .drop, .field input { transition: none } }
details > summary { cursor: pointer; color: var(--muted); font-size: 13px }
.empty { text-align: center; padding: 30px 10px; color: var(--muted) }

/* Informe */
.report { background: #fff; color: #17201C; max-width: 900px; margin: 0 auto; font-family: var(--f-body); border: 1px solid var(--line) }
.report .page { padding: 40px 48px; page-break-after: always; break-after: page }
.report .page:last-child { page-break-after: auto; break-after: auto }
.report table { font-size: 12.5px }
.report th { position: static }
.report-bar { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px }
@media print {
  body { background: #fff }
  .appbar, .app-foot, .report-bar, .no-print { display: none !important }
  main.content { padding: 0; max-width: none }
  .report { border: 0; max-width: none }
}

/* Lote de nueva propuesta */
table.lote td { vertical-align: middle }
table.lote select { font: 13px var(--f-body); padding: 4px 6px; border: 1px solid var(--line); border-radius: .375rem; background: var(--surface); color: var(--ink); max-width: 190px }
table.lote input[type=number] { font: 13px var(--f-body); padding: 4px 6px; border: 1px solid var(--line); border-radius: .375rem; background: var(--surface); color: var(--ink) }
table.lote input:disabled { background: var(--soft); color: var(--muted) }
table.lote tr.all td { background: var(--soft) }
table.lote tr.msg td { white-space: normal; font-size: 12px; padding-top: 0; border-top: 0 }
.pill.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); background: color-mix(in srgb, var(--bad) 7%, var(--surface)) }
.legend.dots { justify-content: center; gap: 8px 22px; font-size: 13px; color: var(--ink); margin: 10px 0 0 }
.legend.dots i { width: 13px; height: 13px; border-radius: 50%; vertical-align: -2px }
.drop .btn.small { justify-self: start; margin-top: 4px }
.drop .btns { margin-top: 4px }

/* Producción desde PVGIS (ficha de instalación) */
.pvgis-box { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; background: color-mix(in srgb, var(--sun) 5%, var(--surface)); max-width: 980px }
.pvgis-box > summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap }
.pvgis-box .tablewrap { overflow-x: auto; margin: 10px 0 }
.pv-campos td { padding: 4px 6px; vertical-align: middle }
.pv-campos input[type=number], .pv-campos input[type=text], .pv-campos select { font: 14px var(--f-body); padding: .35rem .5rem; border: 1px solid var(--line); border-radius: .375rem; background: var(--surface); color: var(--ink) }
.pv-campos input[type=number] { width: 80px }
.pv-campos input[type=text] { width: 130px }
.pv-campos .pv-aspect { margin-left: 4px }
.status.ok { color: var(--ok) }
.pv-res { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px }
.pv-res tr.tot td { font-weight: 600 }
.pv-years { display: flex; gap: 6px; height: 110px; max-width: 560px; align-items: stretch; margin: 8px 0 2px; border-bottom: 0 }
.pv-bar { flex: 1; position: relative; min-width: 22px; background: linear-gradient(var(--line), var(--line)) center 50% / 100% 1px no-repeat }
.pv-bar i { position: absolute; left: 15%; right: 15%; background: color-mix(in srgb, var(--muted) 45%, var(--surface)); border-radius: 3px; min-height: 2px; max-height: calc(50% - 8px) }
.pv-bar.on i { background: var(--accent) }
.pv-bar span { position: absolute; bottom: -2px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--muted); transform: translateY(100%) }
.pv-years { margin-bottom: 18px }