/* ══════════════════════════════════════════════════════════════
   BeHome · Sistema visual
   Basado en el Manual de identidad BeHome v2 (2026)

     OCEAN DEPTH  #395B63  lectura, títulos, portadas
     PALM LEAF    #8FA98B  bloques secundarios, positivo
     SUNSET PEACH #E9A67C  acentos y destacados
     ARENA CLARA  #F8F4EC  fondo
     AMARILLO SOL #F4DC90  detalle

   Tipografía: Arial. Bold para encabezados, Regular para datos.
   Los tonos con sufijo (-80, -55, -20, -bg, -t) son mezclas de
   estos cinco colores, no colores nuevos.

   Este archivo lo comparten el portal del propietario y el
   portal administrativo. Un cambio aquí se ve en los dos.
   ══════════════════════════════════════════════════════════════ */

:root{
  --ocean:#395B63;  --ocean-80:#5A777D; --ocean-55:#8AA0A4; --ocean-20:#D7DEE0;
  --palm:#8FA98B;   --palm-bg:#EAEFE9;  --palm-t:#4F6A4C;
  --peach:#E9A67C;  --peach-bg:#FBEDE2; --peach-t:#A05A2C;
  --arena:#F8F4EC;  --sol:#F4DC90;
  --carta:#FFFFFF;  --linea:#E5DFD3;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:Arial,Helvetica,sans-serif;
  background:var(--arena);color:var(--ocean);line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1040px;margin:0 auto;padding:0 20px}

/* ── Logo ────────────────────────────────────────────────────
   El archivo original es cuadrado y trae mucho margen. Se
   recorta con background-position para mostrar solo la firma.
   Si algún día llega un PNG ajustado y con transparencia, se
   cambia por un <img> y se borran estas dos reglas.           */
.logo{
  background-image:url("logo.jpg.jpeg");
  background-repeat:no-repeat;
  /* El archivo es cuadrado y la firma ocupa el 6%–74% horizontal
     y el 37%–66% vertical. Se escala la imagen a 145px y se
     desplaza para que esa zona caiga dentro de la caja, con un
     par de píxeles de aire. En píxeles, no en porcentajes: los
     porcentajes alinean proporciones y aquí recortaban el pin. */
  background-size:145px 145px;
  background-position:-7px -52px;
  height:44px;width:108px;flex-shrink:0;
  /* El JPEG trae su propio fondo arena, que contra una tarjeta
     blanca se ve como un recuadro. El borde redondeado lo vuelve
     intencional. Con un PNG de fondo transparente esto se quita. */
  border-radius:7px;
}
.logo.grande{
  background-size:196px 196px;
  background-position:-9px -70px;
  height:62px;width:146px;
  border-radius:9px;
}

/* ── Tipografía ──────────────────────────────────────────── */
h1{font-size:25px;font-weight:bold;line-height:1.25}
h2{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
   color:var(--peach-t);font-weight:bold;margin:32px 0 13px}
h3{font-size:15px;font-weight:bold;margin-bottom:16px}
.regla{width:56px;height:3px;background:var(--peach)}

/* ── Controles ───────────────────────────────────────────── */
label{display:block;font-size:13px;font-weight:bold;margin-bottom:7px;color:var(--ocean-80)}

input[type=email],input[type=text],input[type=number],input[type=date],textarea,select{
  font-family:inherit;font-size:15px;padding:11px 13px;color:var(--ocean);
  border:1px solid var(--linea);border-radius:10px;background:var(--arena);width:100%;
}
select{background:var(--carta);cursor:pointer;font-size:14px;padding:10px 13px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ocean);background:var(--carta)}

button{font-family:inherit;font-size:15px;cursor:pointer;border:none;
       border-radius:10px;padding:12px 18px;transition:opacity .15s}
button:hover{opacity:.88}
button:disabled{opacity:.5;cursor:default}
.btn-primario{background:var(--ocean);color:#fff;font-weight:bold}
.btn-secundario{background:transparent;color:var(--ocean-80);border:1px solid var(--linea)}
.btn-acento{background:var(--peach);color:#5C2F10;font-weight:bold}
.btn-full{width:100%}

/* ── Avisos ──────────────────────────────────────────────── */
.aviso{padding:13px 15px;border-radius:10px;font-size:13.5px;display:none}
.aviso.ok{display:block;background:var(--palm-bg);color:var(--palm-t)}
.aviso.err{display:block;background:var(--peach-bg);color:var(--peach-t)}

.alerta{border-radius:12px;padding:15px 17px;margin-bottom:12px}
.alerta.bajo{background:var(--peach-bg);border-left:4px solid var(--peach)}
.alerta.bajo strong,.alerta.bajo span{color:var(--peach-t)}
.alerta.agotado{background:var(--ocean);border-left:4px solid var(--sol)}
.alerta.agotado strong,.alerta.agotado span{color:#fff}
.alerta strong{display:block;font-size:14.5px;font-weight:bold;margin-bottom:2px}
.alerta span{font-size:13px}

/* ── Encabezado ──────────────────────────────────────────── */
header{background:var(--carta);padding:15px 0;border-bottom:1px solid var(--linea)}
.head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.quien{display:flex;align-items:center;gap:12px}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--ocean);color:#fff;
        display:flex;align-items:center;justify-content:center;
        font-size:14px;font-weight:bold;flex-shrink:0}
.quien strong{display:block;font-size:15px}
.quien span{display:block;font-size:12.5px;color:var(--ocean-55)}

nav{display:flex;gap:4px;flex-wrap:wrap;padding:14px 0 0}
nav a{font-size:13.5px;text-decoration:none;color:var(--ocean-80);
      padding:8px 14px;border-radius:8px}
nav a:hover{background:var(--arena)}
nav a.act{background:var(--ocean);color:#fff;font-weight:bold}

.filtros{display:flex;gap:10px;padding:22px 0 4px;flex-wrap:wrap}
.filtros select{min-width:172px;width:auto}

/* ── Tarjetas y paneles ──────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:11px}
.kpi{background:var(--carta);border-radius:13px;padding:17px 18px}
.kpi .rot{font-size:12.5px;color:var(--ocean-80);margin-bottom:6px}
.kpi .val{font-size:24px;font-weight:bold;line-height:1.15}
.kpi .pie{font-size:12px;color:var(--ocean-55);margin-top:5px}
.kpi .pie.up{color:var(--palm-t)}
.kpi .pie.down{color:var(--peach-t)}

.panel{background:var(--carta);border-radius:13px;padding:21px 23px}

/* Glosario · abierto por omisión en papel, plegado en pantalla */
.glosario{margin-top:11px}
.glosario summary{
  cursor:pointer;font-size:13px;color:var(--ocean-80);
  padding:9px 0;list-style:none;user-select:none;
}
.glosario summary::-webkit-details-marker{display:none}
.glosario summary::before{content:"+ ";font-weight:bold;color:var(--peach-t)}
.glosario[open] summary::before{content:"− "}
.glosario summary:hover{color:var(--ocean)}
.glosario-cuerpo{
  background:var(--carta);border-radius:13px;padding:20px 23px;margin-top:4px;
}
.glosario-cuerpo dl{margin:0}
.glosario-cuerpo dt{font-weight:bold;font-size:14px;margin-top:17px}
.glosario-cuerpo dt:first-child{margin-top:0}
.glosario-cuerpo dd{font-size:13.5px;color:var(--ocean-80);margin:4px 0 0;line-height:1.6}
.glosario-cuerpo .ej{
  display:block;margin-top:6px;padding:9px 12px;background:var(--arena);
  border-radius:8px;font-size:13px;color:var(--ocean);
}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}

/* ── Barras comparativas ─────────────────────────────────── */
.barra-fila{display:flex;align-items:center;gap:11px;margin-bottom:7px}
.barra-fila .et{font-size:12.5px;color:var(--ocean-80);width:76px;flex-shrink:0}
.barra-fila .et.mut{color:var(--ocean-55)}
.pista{flex:1;background:var(--arena);border-radius:5px;overflow:hidden;height:22px}
.pista.chica{height:14px}
.relleno{height:100%;display:flex;align-items:center;justify-content:flex-end;
         padding-right:9px;font-size:11.5px;font-weight:bold;white-space:nowrap}
.nota{font-size:13px;color:var(--ocean-80);margin-top:15px}

/* ── Gráfica de columnas ─────────────────────────────────────
   Las alturas se calculan en píxeles desde JavaScript. Un
   porcentaje dentro de un contenedor sin altura resuelta lo
   ignora el navegador y las barras salen como líneas planas. */
.cols{display:flex;align-items:flex-end;gap:8px;height:152px}
.col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
     align-items:center;height:100%;min-width:0}
.col .n{font-size:11px;color:var(--ocean-80);margin-bottom:6px;white-space:nowrap}
.col .b{width:100%;background:var(--palm);border-radius:5px 5px 0 0}
.col.act .b{background:var(--ocean)}
.meses{display:flex;gap:8px;margin-top:8px}
.meses span{flex:1;text-align:center;font-size:11.5px;color:var(--ocean-55);text-transform:capitalize}
.meses span.hoy{color:var(--ocean);font-weight:bold}

/* ── Desglose de reposición ──────────────────────────────── */
.repo{border:1px solid var(--linea);border-radius:12px;padding:17px 19px;margin-bottom:12px}
.repo:last-child{margin-bottom:0}
.repo-top{display:flex;justify-content:space-between;align-items:baseline;
          gap:12px;flex-wrap:wrap;margin-bottom:3px}
.repo-top strong{font-size:15px;font-weight:bold}
.repo-top .fecha{font-size:12.5px;color:var(--ocean-55)}
.repo-sub{font-size:13px;color:var(--ocean-80);margin-bottom:14px}
.cat{display:flex;align-items:center;gap:11px;margin-bottom:7px}
.cat .nom{font-size:13px;flex:1;min-width:0;overflow:hidden;
          text-overflow:ellipsis;white-space:nowrap}
.cat .mini{width:78px;height:7px;background:var(--arena);border-radius:4px;
           overflow:hidden;flex-shrink:0}
.cat .mini i{display:block;height:100%;background:var(--peach)}
.cat .mto{font-size:13px;font-weight:bold;width:80px;text-align:right;flex-shrink:0}
.repo-tot{display:flex;justify-content:space-between;gap:10px;padding-top:12px;
          margin-top:10px;border-top:1px solid var(--linea);font-size:13.5px}

/* ── Historial de la propiedad ───────────────────────────────
   Una línea por intervención. Deliberadamente sin tabla: es una
   lista de cosas que pasaron, no datos que haya que comparar.  */
.hito{
  display:flex;align-items:baseline;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--linea);
}
.hito:last-of-type{border-bottom:none}
.hito-fecha{font-size:12.5px;color:var(--ocean-55);width:88px;flex-shrink:0;
            white-space:nowrap}
.hito-que{flex:1;font-size:14px;min-width:0}
.hito-que em{font-style:normal;color:var(--ocean-55);font-size:12.5px}
.hito-mto{font-size:14px;font-weight:bold;white-space:nowrap}
@media(max-width:560px){
  .hito{flex-wrap:wrap;gap:4px 12px}
  .hito-fecha{width:auto}
  .hito-que{flex-basis:100%;order:3}
}

/* ── Tablas ──────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
   color:var(--ocean-55);font-weight:bold;padding:0 10px 9px 0;
   border-bottom:1px solid var(--linea)}
td{padding:11px 10px 11px 0;border-bottom:1px solid var(--linea)}
tr:last-child td{border-bottom:none}
.num{text-align:right}
.tabla-scroll{overflow-x:auto}

.pill{display:inline-block;font-size:11.5px;font-weight:bold;padding:3px 10px;border-radius:20px}
.pill.si{background:var(--palm-bg);color:var(--palm-t)}
.pill.no{background:var(--peach-bg);color:var(--peach-t)}
.pill.neutro{background:var(--arena);color:var(--ocean-80)}

/* ── Pie y estados ───────────────────────────────────────── */
footer{text-align:center;padding:44px 20px;color:var(--ocean-55);font-size:12.5px}
footer .lema{font-weight:bold;letter-spacing:.1em;text-transform:uppercase;
             font-size:11px;color:var(--ocean-80);margin-bottom:6px}
.cargando{text-align:center;padding:80px 20px;color:var(--ocean-55);font-size:14px}
.vacio{color:var(--ocean-55);font-size:13.5px;padding:6px 0}

@media(max-width:560px){
  .kpi .val{font-size:21px}
  .barra-fila .et{width:64px}
  .cat .mini{display:none}
}

/* ── Impresión ──────────────────────────────────────────────
   El navegador ya sabe guardar como PDF. Aquí solo se quita lo
   que no tiene sentido en papel (encabezado, filtros, botones) y
   se evita que un panel quede partido entre dos hojas.        */
@media print{
  @page{margin:14mm}
  body{background:#fff}
  header,.filtros,nav,footer,button{display:none !important}
  #membrete{display:block !important;margin-bottom:26px}
  /* En papel el glosario va siempre abierto: quien lee el PDF no
     puede hacerle clic a nada. */
  .glosario summary{display:none}
  .glosario-cuerpo{display:block !important;border:1px solid var(--linea)}
  .wrap{max-width:none;padding:0}
  .panel,.kpi{border:1px solid var(--linea);break-inside:avoid}
  .kpis{break-inside:avoid}
  h2{margin-top:22px;break-after:avoid}
  .cols{height:120px}
  a{text-decoration:none;color:inherit}
}