/* Inversiones Morán Group · identidad de la casa:
   verde profundo, sello con el retrato de Feliciano Zabulon Moran Belalcazar, tarjeta principal con
   edificios dibujados a línea, tipografía DM Sans y Georgia para los rótulos de la marca. */
@font-face { font-family: "DM Sans"; src: url("/fuentes/dm-sans.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }
:root {
  --fondo: #f4f7f5; --tinta: #183539; --tenue: #52696d; --linea: #dce5e2; --menta: #dff2ea;
  --verde-casa: #12665e; --verde-boton: #0f5a52; --verde-hondo: #103f40; --oro: #9a7b3c;
  --verde: #0f6b4f; --verde-f: #e2f3ea; --ambar: #8a5200; --ambar-f: #fdf0d8; --rojo: #a4262c; --rojo-f: #fbe6e6;
  --azul: #1d4f91; --azul-f: #e3edf9; --gris-f: #eef4f1;
  --serif: Georgia, "Times New Roman", serif;
  --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 16px/1.5 "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(1.7rem, 3.2vw, 2.22rem); font-weight: 650; letter-spacing: -.045em; line-height: 1.1; text-wrap: balance; }
h2 { font-size: 1.12rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.3; }
h3 { font-size: 1rem; font-weight: 650; }
a { color: var(--verde-casa); }
small, .tenue { color: var(--tenue); font-size: .875rem; }
[hidden] { display: none !important; }
.salto { position: absolute; left: -999px; top: 8px; background: var(--verde-hondo); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 50; }
.salto:focus { left: 8px; }
:focus-visible { outline: 3px solid #1d4f91; outline-offset: 2px; border-radius: 6px; }
.cargando { padding: var(--e6); text-align: center; color: var(--tenue); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.der { text-align: right; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- la regla con rombo del sello: separador de la casa --- */
.regla { display: flex; align-items: center; gap: 10px; color: var(--oro); }
.regla::before, .regla::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .55; }
.regla i { width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); flex: none; }

/* --- estructura --- */
.app { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
.lado { display: none; }
.zona { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.sello { width: 50px; height: 50px; border: 0; padding: 0; background: #fff; border-radius: 9px; overflow: hidden; cursor: pointer; flex: none; line-height: 0; transition: transform .15s; }
.sello:hover { transform: scale(1.04); }
.sello img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tope { position: sticky; top: 0; z-index: 20; min-height: 60px; background: #fff; border-bottom: 1px solid var(--linea); display: flex; align-items: center; gap: var(--e3); padding: 0 clamp(14px, 3vw, 40px); font-size: .875rem; }
.tope .sello { width: 40px; height: 40px; }
.miga-tope { color: var(--tenue); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.miga-tope b { color: var(--tinta); font-weight: 650; }
.miga-tope .barra-inc { margin: 0 8px; opacity: .6; }
.tope .espacio { flex: 1; }
.campana { position: relative; width: 44px; height: 44px; border: 1px solid var(--linea); border-radius: 11px; background: #fff; display: grid; place-items: center; color: var(--tinta); flex: none; transition: background .15s; }
.campana:hover { background: var(--gris-f); }
.campana svg { width: 19px; height: 19px; }
.campana .cuenta { position: absolute; top: -6px; right: -6px; }
.cuenta { background: var(--rojo); color: #fff; border-radius: 99px; font-size: .75rem; font-weight: 700; padding: 0 6px; line-height: 1.5; }
.rol { display: inline-flex; align-items: center; gap: 8px; background: var(--gris-f); border-radius: 99px; padding: 8px 14px; font-weight: 650; font-size: .8rem; white-space: nowrap; }
.rol i { width: 8px; height: 8px; border-radius: 50%; background: #1f9d6b; }
.icono { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; border-radius: 9px; cursor: pointer; color: inherit; flex: none; }
.icono:hover { background: #0000000d; }
main { padding: clamp(18px, 3vw, 36px) clamp(14px, 3vw, 40px); padding-bottom: 104px; max-width: 1280px; width: 100%; margin: 0 auto; display: grid; gap: 18px; align-content: start; min-width: 0; }
main:focus { outline: 0; }

/* barra inferior en celular */
nav.pie { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--linea); display: flex; z-index: 20; padding-bottom: env(safe-area-inset-bottom); }
nav.pie a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px; min-height: 58px; font-size: .75rem; color: var(--tenue); text-decoration: none; text-align: center; line-height: 1.15; font-weight: 500; }
nav.pie a svg { width: 21px; height: 21px; padding: 4px 16px; box-sizing: content-box; border-radius: 99px; transition: background .15s; }
nav.pie a[aria-current="page"] { color: #0d4f48; font-weight: 700; }
nav.pie a[aria-current="page"] svg { background: var(--menta); }

@media (min-width: 960px) {
  .app { grid-template-columns: 256px minmax(0, 1fr); }
  nav.pie, .tope .sello { display: none; }
  main { padding-bottom: var(--e6); }
  .lado { display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; background: #fff; border-right: 1px solid var(--linea); padding: 22px 14px 14px; overflow-y: auto; }
  .marca-casa { display: flex; align-items: center; gap: 11px; margin: 0 6px 22px; }
  .marca-casa strong { display: block; font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
  .marca-casa small { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; }
  .nav-rot { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); font-weight: 650; margin: 16px 12px 8px; }
  .nav-item { display: flex; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 9px; color: var(--tinta); text-decoration: none; font-size: .94rem; font-weight: 500; min-height: 44px; line-height: 1.25; transition: background .15s; }
  .nav-item svg { width: 19px; height: 19px; color: var(--tenue); flex: none; }
  .nav-item:hover { background: #f0f5f2; }
  .nav-item[aria-current="page"] { background: var(--menta); color: #0d4f48; font-weight: 650; }
  .nav-item[aria-current="page"] svg { color: var(--verde-casa); }
  .nav-item .cuenta { margin-left: auto; }
  .lado-pie { margin-top: auto; padding-top: 14px; }
  .lema { font-family: var(--serif); font-style: italic; font-size: .8rem; color: var(--tenue); text-align: center; line-height: 1.45; margin: 10px 6px 14px; }
  .perfil { display: flex; gap: 11px; align-items: center; padding: 10px 6px 0; border-top: 1px solid var(--linea); }
  .perfil .quien { min-width: 0; flex: 1; line-height: 1.25; }
  .perfil .quien b { display: block; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .perfil .quien small { font-size: .78rem; }
  .avatar { width: 38px; height: 38px; border-radius: 10px; background: var(--menta); color: #0d4f48; display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex: none; }
}

/* --- tarjeta principal con los edificios --- */
.hero { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(100deg, #113e40 0%, #12504d 100%); color: #fff; border-radius: 15px; min-height: 186px; display: flex; align-items: center; padding-right: 170px; }
.hero-cuerpo { padding: 25px 30px; z-index: 1; min-width: 0; }
.hero-rot { display: flex; align-items: center; gap: 9px; color: #bfe4d5; letter-spacing: .14em; font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.hero-rot svg, .hero-meta svg { width: 17px; height: 17px; flex: none; }
.hero-valor { font-size: clamp(34px, 4.4vw, 56px); font-weight: 580; letter-spacing: -.045em; line-height: 1.18; margin: 8px 0 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hero-meta { display: flex; gap: 8px; align-items: center; color: #d6ebe2; font-size: .875rem; }
.hero canvas { position: absolute; right: 150px; top: 0; height: 100%; width: min(54%, 560px); z-index: 0; }
.hero-sello { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: 132px; background: #fff; padding: 5px; border: 0; border-radius: 10px; box-shadow: 0 8px 18px #052b3440; cursor: pointer; line-height: 0; transition: transform .2s; }
.hero-sello:hover { transform: translateY(-50%) scale(1.03); }
.hero-sello img { width: 100%; height: auto; border-radius: 6px; display: block; }
@media (max-width: 699px) {
  .hero { min-height: 150px; padding-right: 92px; }
  .hero-cuerpo { padding: 22px 17px; }
  .hero canvas { right: 40px; width: 78%; opacity: .5; }
  .hero-sello { width: 76px; padding: 3px; right: 12px; border-radius: 7px; }
}

.lema-movil { font-family: var(--serif); font-style: italic; font-size: .9rem; color: var(--tenue); text-align: center; line-height: 1.45; }
.miga-tope .corto { display: none; }
@media (max-width: 519px) { .miga-tope .grupo, .miga-tope .largo { display: none; } .miga-tope .corto { display: inline; } .miga-tope b { font-size: 1.05rem; } }
@media (min-width: 960px) { .solo-movil { display: none; } }

/* --- piezas --- */
.cab { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: end; justify-content: space-between; }
.cab .acciones { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.panel { background: #fff; border: 1px solid var(--linea); border-radius: 13px; padding: 21px; display: grid; gap: 14px; min-width: 0; align-content: start; }
.panel > header { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: baseline; justify-content: space-between; }
.par { display: grid; gap: 18px; align-items: start; }
@media (min-width: 1100px) { .par { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.rejilla { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); }
.kpis { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kpi-valor { overflow-wrap: anywhere; }
@media (max-width: 519px) { .kpi { padding: 12px; } .kpi-valor { font-size: clamp(1.2rem, 5.6vw, 1.6rem) !important; } .kpi-cab { font-size: .82rem; gap: 8px; } }
.kpi, .dato { background: #fff; border: 1px solid var(--linea); border-radius: 13px; padding: 15px 16px; display: grid; gap: 5px; align-content: start; }
.kpi-cab { display: flex; align-items: center; gap: 10px; font-size: .875rem; font-weight: 600; margin-bottom: 4px; }
.teja { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.teja svg { width: 18px; height: 18px; }
.teja.verde { background: #dff2ea; color: #0f6b4f; } .teja.ambar { background: #fdecd2; color: #8a5200; } .teja.azul { background: #e2edfa; color: #1d4f91; } .teja.oro { background: #fbf1cf; color: #6f5400; } .teja.rojo { background: #fbe6e6; color: #a4262c; }
.kpi-valor, .dato b { font-size: 1.6rem; font-weight: 650; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.dato small { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 650; }
.kpi.alerta .kpi-valor, .dato.alerta b { color: var(--rojo); }
.kpi.duda .kpi-valor, .dato.duda b { color: var(--ambar); }
.dato.bien b { color: var(--verde); }
.avance progress { display: block; width: 100%; height: 7px; appearance: none; border: 0; border-radius: 99px; overflow: hidden; background: var(--gris-f); margin-top: 6px; }
.avance progress::-webkit-progress-bar { background: var(--gris-f); }
.avance progress::-webkit-progress-value { background: var(--verde-casa); border-radius: 99px; }
.avance progress::-moz-progress-bar { background: var(--verde-casa); }
.franja { background: #eef6f2; border: 1px solid #cfe3da; border-radius: 13px; padding: 14px 18px; display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; justify-content: space-between; }
.franja > div { flex: 1 1 320px; min-width: 0; }
.franja .btn { flex: none; }
.franja b { display: block; }
.franja.duda { background: #fdf4e1; border-color: #ecd7a6; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 16px; border-radius: 9px; border: 1px solid var(--linea); background: #fff; color: var(--tinta); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, transform .1s; }
.btn:hover { background: var(--gris-f); border-color: #c3d3cd; }
.btn:active { transform: translateY(1px); }
.btn.primario { background: var(--verde-boton); border-color: var(--verde-boton); color: #fff; }
.btn.primario:hover { background: #0b4640; }
.btn.peligro { color: var(--rojo); border-color: #e2b6b8; }
.btn.chico { min-height: 36px; padding: 5px 11px; font-size: .875rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn svg, .icono svg { width: 18px; height: 18px; flex: none; }
.marca-e { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 99px; font-size: .8rem; font-weight: 650; white-space: nowrap; background: var(--gris-f); color: var(--tenue); }
.marca-e::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.marca-e.v { background: var(--verde-f); color: var(--verde); }
.marca-e.a { background: var(--ambar-f); color: var(--ambar); }
.marca-e.r { background: var(--rojo-f); color: var(--rojo); }
.marca-e.z { background: var(--azul-f); color: var(--azul); }
.tabla { overflow-x: auto; margin: 0 -21px; padding: 0 21px; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); font-weight: 650; padding: 8px 10px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
td { padding: 11px 10px; border-bottom: 1px solid #e8efec; vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fafcfb; }
td small { display: block; }
tfoot td { font-weight: 700; border-top: 2px solid var(--linea); }
.lista { display: grid; gap: var(--e2); }
.fila { display: flex; gap: var(--e3); align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid #e3ebe7; border-radius: 11px; flex-wrap: wrap; }
.fila .t { min-width: 0; flex: 1 1 220px; }
.fila .t b { display: block; overflow-wrap: anywhere; }
.fila .t small { display: block; }
.fila .v { text-align: right; }
.fila .v b { display: block; font-variant-numeric: tabular-nums; }
.fila.alta { border-left: 4px solid var(--rojo); } .fila.media { border-left: 4px solid #c98a12; } .fila.baja { border-left: 4px solid #a9beb6; }
.fila .ops, .ops { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.nota { background: var(--ambar-f); border: 1px solid #e6cf9c; color: #5c3a00; border-radius: 11px; padding: 11px 14px; font-size: .92rem; }
.nota.info { background: var(--azul-f); border-color: #b9cfe9; color: #173f73; }
.nota.ok { background: var(--verde-f); border-color: #b5dcc8; color: #0b4d39; }
.vacio { text-align: center; color: var(--tenue); padding: var(--e5) var(--e3); }
.tarjetas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
a.tarjeta { background: #fff; border: 1px solid var(--linea); border-radius: 13px; padding: 17px 18px; display: grid; gap: 7px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; align-content: start; }
a.tarjeta:hover { border-color: var(--verde-casa); transform: translateY(-2px); }
.tarjeta .linea { display: flex; justify-content: space-between; gap: var(--e2); align-items: baseline; flex-wrap: wrap; }
.mes-sel { display: inline-flex; align-items: center; gap: 2px; background: #fff; border: 1px solid var(--linea); border-radius: 9px; }
.mes-sel input { border: 0; background: none; font: inherit; font-weight: 600; padding: 9px 4px; min-height: 44px; color: var(--tinta); }
.grafica { width: 100%; height: auto; max-height: 210px; }
.grafica .i { fill: var(--verde-casa); } .grafica .e { fill: #c98a12; } .grafica line { stroke: var(--linea); }
.ejes { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; text-align: center; font-size: .75rem; color: var(--tenue); }
.leyenda { display: flex; gap: var(--e4); font-size: .85rem; color: var(--tenue); }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.leyenda .i { background: var(--verde-casa); } .leyenda .e { background: #c98a12; }
.dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--e3); margin: 0; }
.dl div { min-width: 0; } .dl dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); font-weight: 650; } .dl dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }
.miga { font-size: .9rem; }
details > summary { cursor: pointer; font-weight: 650; padding: 11px 0; }
details > .cuerpo, .formu details > .cuerpo { padding: var(--e3) 0 0; overflow: visible; }
details .dl { margin: var(--e3) 0; }
fieldset { border: 1px solid var(--linea); border-radius: 10px; padding: 8px 14px; margin: 0; min-width: 0; }
legend { font-size: .875rem; font-weight: 650; padding: 0 6px; }

/* En celular cada fila de una tabla se vuelve una tarjeta con sus rótulos. */
@media (max-width: 699px) {
  .panel { padding: 16px; }
  .tabla { overflow: visible; margin: 0; padding: 0; }
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla table, .tabla tbody, .tabla tfoot, .tabla tr, .tabla td { display: block; }
  .tabla tr { border: 1px solid #e3ebe7; border-radius: 11px; padding: 10px 12px; margin-bottom: 8px; }
  .tabla tfoot tr { background: var(--gris-f); }
  .tabla td, .tabla tfoot td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; background: none; }
  .tabla td::before { content: attr(data-th); color: var(--tenue); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 650; text-align: left; flex: none; padding-top: 3px; }
  .tabla td:first-child { display: block; text-align: left; font-size: 1rem; padding-bottom: 6px; }
  .tabla td:first-child::before, .tabla td[data-th=""]::before { content: none; }
  .tabla td .ops { justify-content: flex-end; }
  .rol { display: none; }
}

/* --- formularios y diálogo --- */
dialog { border: 0; border-radius: 16px; padding: 0; width: min(100% - 24px, 620px); max-height: calc(100dvh - 24px); box-shadow: 0 20px 60px #0b2b2a55; color: var(--tinta); }
dialog::backdrop { background: #0b2b2a80; }
.formu { display: grid; grid-template-rows: auto 1fr auto auto; max-height: calc(100dvh - 24px); }
.formu > header { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); padding: var(--e3) var(--e3) var(--e3) 20px; border-bottom: 1px solid var(--linea); }
.formu .cuerpo { padding: 20px; overflow-y: auto; display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); align-content: start; }
.formu .ancho, .formu .cuerpo > .nota, .formu .cuerpo > .papel, .formu .cuerpo > .tabla, .formu .cuerpo > p, .formu .cuerpo > .lista, .formu .cuerpo > .retrato { grid-column: 1 / -1; }
.formu > footer { display: flex; gap: var(--e2); justify-content: flex-end; padding: var(--e3) 20px; border-top: 1px solid var(--linea); flex-wrap: wrap; }
.formu .error, .acceso .error { margin: 0 20px var(--e2); background: var(--rojo-f); color: var(--rojo); border-radius: 9px; padding: 10px 12px; font-weight: 600; }
label.campo { display: grid; gap: 4px; font-size: .875rem; font-weight: 650; align-content: start; }
label.campo small { font-weight: 400; }
input, select, textarea { font: inherit; color: inherit; }
label.campo input, label.campo select, label.campo textarea { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid #a9bdb5; border-radius: 9px; background: #fff; font-weight: 400; font-size: 1rem; transition: border-color .15s; }
label.campo input:hover, label.campo select:hover, label.campo textarea:hover { border-color: var(--verde-casa); }
label.campo textarea { min-height: 76px; resize: vertical; }
label.marca-c { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; min-height: 44px; padding: 8px 0; }
label.marca-c input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--verde-casa); }
.retrato { text-align: center; display: grid; gap: 12px; justify-items: center; }
.retrato img { width: min(100%, 440px); height: auto; }
.retrato p { font-family: var(--serif); font-style: italic; color: var(--tenue); }

/* --- ingreso: la casa se presenta con su sello --- */
.acceso { min-height: 100dvh; display: grid; place-items: center; padding: var(--e5) var(--e4); background-color: var(--fondo);
  background-image: linear-gradient(#dce5e270 1px, transparent 1px), linear-gradient(90deg, #dce5e270 1px, transparent 1px); background-size: 32px 32px; }
.acceso .caja { width: min(100%, 440px); background: #fff; border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; box-shadow: 0 18px 50px #103f4016; }
.caja-cab { background: linear-gradient(100deg, #113e40 0%, #12504d 100%); color: #fff; padding: 26px 28px 20px; text-align: center; }
.caja-cab img { width: 136px; height: 136px; background: #fff; border-radius: 14px; padding: 5px; box-shadow: 0 8px 18px #052b3440; }
.caja-cab small { display: block; color: #cbdfd4; letter-spacing: .26em; text-transform: uppercase; font-size: .75rem; margin-top: 14px; }
.caja-cab b { display: block; font: 1.7rem var(--serif); letter-spacing: .05em; line-height: 1.15; }
.caja-cab .regla { color: #d9c08a; margin: 12px auto 8px; max-width: 220px; }
.caja-cab em { display: block; font: italic .86rem var(--serif); color: #d6ebe2; line-height: 1.4; }
.acceso form { padding: 24px 28px 28px; display: grid; gap: var(--e3); }
.acceso form h1 { font-size: 1.45rem; }
.acceso .error { margin: 0; }
#aviso { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: #0b2b2a; color: #fff; padding: 11px 18px; border-radius: 10px; font-weight: 600; z-index: 60; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: calc(100% - 32px); text-align: center; }
#aviso.ver { opacity: 1; }
@media (min-width: 960px) { #aviso { bottom: 28px; } }

/* --- comprobante --- */
.papel { border: 1px solid var(--linea); border-radius: 11px; padding: 20px; background: #fff; display: grid; gap: var(--e3); }
.papel .encab { display: flex; gap: var(--e4); align-items: center; }
.papel .encab img { width: 84px; height: 84px; flex: none; }
.papel .encab small { font: .8rem var(--serif); letter-spacing: .2em; text-transform: uppercase; display: block; color: var(--tinta); }
.papel .encab h3 { font-size: 1.05rem; margin-top: 2px; }
.papel dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; font-size: .95rem; }
.papel dt { color: var(--tenue); } .papel dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.papel .firmas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5); margin-top: var(--e6); font-size: .85rem; text-align: center; }
.papel .firmas span { border-top: 1px solid #333; padding-top: 6px; }
.papel .anulado { color: var(--rojo); font-weight: 800; letter-spacing: .1em; }
#imprimir { display: none; }
@media print {
  body > *:not(#imprimir) { display: none !important; }
  #imprimir { display: block; }
  body { background: #fff; }
  .papel { border: 0; padding: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }