/* Tratum — "señalética de carretera hecha web".
   Barlow (señal vial) para titulares y cifras, Source Sans 3 para UI,
   azul noche para estructura y UN toque de ámbar taxi por pantalla. */

@font-face {
  font-family: "Barlow";
  src: url(/static/fonts/barlow-600.woff2) format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url(/static/fonts/barlow-700.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url(/static/fonts/sourcesans3-400-700.woff2) format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --tinta: #1b2733;
  --tinta-suave: #49596a;
  --fondo: #f7f5f0;
  --blanco: #ffffff;
  --marca: #123c5f;
  --accion: #0f5ca8;
  --ambar: #f5b301;
  --borde: #e2ddd3;
  --exito: #1e7a2e;
  --exito-fondo: #e2f4e3;
  --aviso: #7a5300;
  --aviso-fondo: #fbf0d3;
  --peligro: #b03a2e;
  --peligro-fondo: #fbe5e0;
  --titulares: "Barlow", system-ui, sans-serif;
  --texto: "Source Sans 3", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { font-size: 106.25%; } /* 17px: usuario 50+, movil */

body {
  margin: 0;
  font-family: var(--texto);
  color: var(--tinta);
  background: var(--fondo);
  line-height: 1.6;
}

:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 2px;
}

h1, h2, h3 {
  font-family: var(--titulares);
  line-height: 1.25;
  color: var(--marca);
}

/* ---------- Cabecera: dos niveles (marca+Entrar / pestañas) ---------- */
.cabecera {
  background: var(--blanco);
  border-bottom: 3px solid var(--ambar);
  position: sticky;
  top: 0;
  z-index: 10;
}
.barra-superior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 1.2rem 0.35rem;
}
.enlace-cuenta {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--marca);
  text-decoration: none;
  border: 1.5px solid var(--borde);
  border-radius: 99px;
  padding: 0.4rem 1rem;
}
.enlace-cuenta:hover { border-color: var(--accion); color: var(--accion); }

.marca {
  font-family: var(--titulares);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--marca);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.marca small {
  display: block;
  font-family: var(--texto);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--tinta-suave);
  line-height: 1.1;
}
.acerca h2 { font-size: 1.15rem; margin-top: 1.4rem; }
.acerca p { max-width: 44rem; }
.acerca a { color: var(--accion); }

.cabecera nav { display: flex; gap: 0.3rem; padding: 0 0.8rem 0.3rem; }
.cabecera nav a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--tinta-suave);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
}
.cabecera nav a.activo { color: var(--marca); background: var(--fondo); }
.cabecera nav a:hover { color: var(--accion); }

/* En movil, las pestañas se van abajo como una app */
@media (max-width: 640px) {
  .marca small { display: none; }
  .cabecera nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--blanco);
    border-top: 1px solid var(--borde);
    box-shadow: 0 -2px 10px rgba(27, 39, 51, 0.08);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 0.3rem 0.2rem calc(0.3rem + env(safe-area-inset-bottom));
    z-index: 20;
  }
  .cabecera nav a {
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.72rem;
    padding: 0.3rem 0.2rem;
    text-align: center;
    border-radius: 8px;
  }
  .cabecera nav a.activo { background: none; color: var(--marca); }
  .cabecera nav a.activo svg { stroke: var(--marca); }
  body { padding-bottom: 4.4rem; }  /* hueco para la barra inferior */
}

main { max-width: 72rem; margin: 0 auto; padding: 1.2rem; }

/* En pantallas anchas, las tarjetas van a 2 columnas */
@media (min-width: 900px) {
  .tarjetas { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ---------- Portada ---------- */
.intro h1, .hero h1 { margin: 0.4rem 0 0.3rem; font-size: clamp(1.5rem, 5vw, 2.2rem); }
.intro p { margin: 0 0 0.8rem; color: var(--tinta-suave); }

.gancho {
  font-size: 1.05rem;
  margin: 0 0 0.3rem;
  padding: 0;
  max-width: 44rem;
}
.gancho b, .gancho strong { font-family: var(--titulares); }

.stats { font-size: 0.85rem; color: var(--tinta-suave); margin: 0 0 0.8rem; }

@media (max-width: 640px) {
  .hero h1 { font-size: 1.35rem; }
  .gancho { font-size: 0.98rem; line-height: 1.45; }
  .hero { margin-bottom: 0.6rem; }
}

/* Pagina de avisos */
.entradilla { font-size: 1.05rem; max-width: 40rem; }
.lista-valor { padding-left: 1.2rem; margin: 0.8rem 0 1.2rem; }
.lista-valor li { margin: 0.5rem 0; }

.bloque { margin: 1.3rem 0; scroll-margin-top: 5rem; }

/* Atajos a secciones de la portada */
.atajos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: -0.4rem 0 1rem;
}
.atajos a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  background: var(--blanco);
  border: 1.5px solid var(--borde);
  border-radius: 99px;
  padding: 0.4rem 0.85rem;
}
.atajos a b { color: var(--marca); margin-left: 0.15rem; }
.atajos a:hover { border-color: var(--accion); }
.atajos a.activo { background: var(--marca); border-color: var(--marca); color: #fff; }
.atajos a.activo b { color: var(--ambar); }
.atajos .atajo-desiertas { border-color: #c9a3ef; }
.atajos .atajo-desiertas b { color: #6b2fa8; }
.bloque h2 {
  font-size: 1.25rem;
  margin: 0 0 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--borde);
}
.contador { color: var(--tinta-suave); font-weight: 400; font-size: 0.95rem; }
.pista { font-size: 0.9rem; color: var(--tinta-suave); margin: -0.2rem 0 0.7rem; }
.aviso-ampliado {
  background: var(--aviso-fondo);
  border: 1px solid var(--ambar);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  color: var(--aviso);
  margin: 0 0 1rem;
}
.aviso-ampliado a {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--marca);
  background: var(--blanco);
  border: 1.5px solid var(--ambar);
  border-radius: 99px;
  padding: 0.45rem 1rem;
  text-decoration: none;
}
.objeto-original { font-size: 0.85rem; color: var(--tinta-suave); margin: -0.6rem 0 1rem; }

/* Puerta de codigo (beta privada) */
.puerta {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--fondo);
  place-items: center;
  padding: 1rem;
}
.puerta-caja {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-top: 4px solid var(--ambar);
  border-radius: 12px;
  padding: 1.6rem;
  max-width: 22rem;
  width: 100%;
  text-align: center;
  box-shadow: 0 12px 40px rgba(18, 60, 95, 0.18);
}
.puerta-caja h1 { margin: 0.5rem 0 0.2rem; font-size: 1.5rem; }
.puerta-caja p { color: var(--tinta-suave); font-size: 0.95rem; }
.puerta-caja input {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  font-family: var(--titulares); font-size: 1.2rem; letter-spacing: 2px;
  padding: 0.7rem; margin: 0.6rem 0;
  border: 1.5px solid var(--borde); border-radius: 8px;
}
.puerta-caja .boton { width: 100%; border: none; cursor: pointer; }
.puerta-error { color: var(--peligro); font-weight: 600; }

/* Login / cuenta */
.nav-entrar { color: var(--marca) !important; font-weight: 700 !important; }
.acceso, .form-acceso { max-width: 26rem; }
.form-acceso .campo { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.9rem; }
.form-acceso input {
  display: block; width: 100%; margin-top: 0.3rem;
  font-family: var(--texto); font-size: 1rem;
  padding: 0.7rem 0.8rem; border: 1.5px solid var(--borde); border-radius: 8px;
}
.form-cuenta { margin-top: 1.4rem; }
.form-cuenta .boton { border: none; cursor: pointer; }
.estado-avisos { font-weight: 600; margin: 0.4rem 0 0.8rem; }
#avisos .acciones { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
#avisos .boton { border: none; cursor: pointer; }
.ver-mas { text-align: right; font-size: 0.95rem; }
.ver-mas a { color: var(--accion); text-decoration: none; font-weight: 600; }

/* ---------- Filtros (plegables en movil) ---------- */
.filtros {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}
.caja-filtros {
  border: 1.5px solid var(--borde);
  border-radius: 10px;
  background: var(--blanco);
  padding: 0;
}
.caja-filtros summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--marca);
  padding: 0.7rem 1rem;
  list-style: none;
}
.caja-filtros summary::-webkit-details-marker { display: none; }
.caja-filtros summary::after { content: "▾"; margin-left: auto; color: var(--tinta-suave); }
.caja-filtros[open] summary::after { content: "▴"; }
.caja-filtros .chips, .caja-filtros .controles { padding: 0 1rem; }
.caja-filtros .controles { padding-bottom: 1rem; margin-top: 0.6rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.chips-etiqueta { font-size: 0.9rem; font-weight: 600; color: var(--tinta-suave); margin-right: 0.2rem; }
.chip svg { vertical-align: -3px; margin-right: 0.15rem; }
.chip {
  font-family: var(--texto);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tinta);
  background: var(--blanco);
  border: 1.5px solid var(--borde);
  border-radius: 99px;
  padding: 0.6rem 1.1rem;   /* >=44px de alto */
  cursor: pointer;
}
.chip:hover { border-color: var(--accion); color: var(--accion); }
.chip.activo {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
}
.chip.activo::before { content: "✓ "; }

.controles { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Panel de zona: patron Idealista/Booking — filas limpias con contador,
   acordeon por comunidad, tarjeta flotante en escritorio y hoja inferior
   con "Ver resultados" en movil. */
.zona { flex: 1 1 12rem; position: relative; }
.zona summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.95rem;
  padding: 0.65rem 0.8rem;
  border: 1.5px solid var(--borde);
  border-radius: 8px;
  background: var(--blanco);
  color: var(--tinta-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zona summary::-webkit-details-marker { display: none; }
.zona summary::after { content: " ▾"; color: var(--tinta-suave); }
.zona[open] summary { border-color: var(--accion); }
.zona .zona-resumen { color: var(--tinta); font-weight: 700; }

.zona-panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 21rem;
  max-width: 24rem;
  z-index: 30;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(18, 60, 95, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.zona-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--borde);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--marca);
}
.zona-limpiar {
  font-family: var(--texto);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accion);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 0.2rem;
}
.zona-lista { overflow-y: auto; max-height: 19rem; padding: 0.3rem 0; }
.zona-grupo + .zona-grupo { border-top: 1px solid var(--fondo); }
.zona-fila {
  display: flex;
  align-items: center;
  min-height: 2.75rem;   /* 44px tactiles */
  padding: 0 0.7rem 0 1rem;
}
.zona-fila:hover { background: var(--fondo); }
.zona-fila label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  align-self: stretch;
}
.zona-fila-ccaa label span { font-weight: 700; font-size: 0.95rem; }
.zona-fila-prov { padding-left: 2.2rem; }
.zona-fila-prov label span { font-size: 0.92rem; }
.zona-fila .cuenta { font-size: 0.82rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.zona-desplegar {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tinta-suave);
  padding: 0.6rem 0.5rem;
  display: flex;
  align-items: center;
}
.zona-desplegar svg { transition: transform 0.15s; }
.zona-grupo.abierto .zona-desplegar svg { transform: rotate(180deg); }
.zona input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--marca);
  flex-shrink: 0;
  margin: 0;
}
.zona-pie {
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--borde);
  background: var(--blanco);
}
.zona-pie .boton { width: 100%; border: none; cursor: pointer; text-align: center; }
.zona-nota { font-size: 0.82rem; color: var(--tinta-suave); margin: 0 0 0.5rem; }
.zona-nota a { color: var(--accion); font-weight: 600; }
.zona-fondo { display: none; }

@media (max-width: 640px) {
  .zona-fondo {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(18, 39, 51, 0.45);
    z-index: 29;
  }
  .zona-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    min-width: 0;
    max-width: none;
    max-height: 78vh;
    border-radius: 16px 16px 0 0;
    z-index: 30;
  }
  .zona-lista { max-height: none; flex: 1; }
  .zona-pie { padding-bottom: calc(0.6rem + env(safe-area-inset-bottom)); }
}
.controles input, .controles select {
  font-family: var(--texto);
  font-size: 0.95rem;
  padding: 0.65rem 0.8rem;
  border: 1.5px solid var(--borde);
  border-radius: 8px;
  background: var(--blanco);
  color: var(--tinta);
  min-width: 0;
}
.controles input[type="search"] { flex: 2 1 12rem; }
.controles select { flex: 1 1 9rem; }

/* ---------- Tarjetas ---------- */
.tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.tarjetas a {
  display: block;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(27, 39, 51, 0.06);
}
/* Semaforo de oportunidad: barra lateral de color, sin badge */
.tarjetas li.sem-alta > a { border-left: 4px solid var(--exito); }
.tarjetas li.sem-media > a { border-left: 4px solid var(--ambar); }
.tarjetas li.sem-baja > a { border-left: 4px solid var(--peligro); }
.tarjetas li.sem-desierta > a { border-left: 4px solid #6b2fa8; }

.linea-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.linea-cabecera .mes {
  font-family: var(--titulares);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.linea-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin-top: 0.35rem;
}
.linea-meta .total { font-size: 0.9rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.tarjetas a:hover { border-color: var(--accion); box-shadow: 0 2px 8px rgba(18, 60, 95, 0.14); }
.tarjetas strong {
  display: block;
  margin: 0.2rem 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fecha-limite {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--tinta-suave);
}
.urgente { color: var(--peligro); }
.organo { display: block; font-size: 0.9rem; color: var(--tinta-suave); }
.importe {
  display: block;
  font-size: 0.9rem;
  color: var(--tinta-suave);
  margin-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.importe b { font-family: var(--titulares); font-size: 1.05rem; color: var(--tinta); font-weight: 700; }

/* ---------- Badges y pastillas ---------- */
.fila-superior { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.25rem; }
.badge {
  font-size: 0.8125rem;   /* 14px minimo */
  font-weight: 700;
  padding: 0.15rem 0.6rem;
  border-radius: 6px;
}
.badge-alta { background: var(--exito-fondo); color: var(--exito); }
.badge-media { background: var(--aviso-fondo); color: var(--aviso); }
.badge-baja { background: var(--peligro-fondo); color: var(--peligro); }
.badge-apt-solo { background: var(--exito); color: #fff; }
.badge-apt-grupo { background: var(--accion); color: #fff; }
.badge-apt-flota { background: #e8e4dc; color: var(--tinta-suave); }
.badge-desierta { background: #f3e8fd; color: #6b2fa8; }
.pastilla {
  font-size: 0.8125rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 0.15rem 0.6rem;
  color: var(--tinta-suave);
}
.pastilla-lotes { border-style: dashed; font-weight: 600; color: var(--marca); }

/* ---------- Ficha ---------- */
.ficha {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 1.3rem 1.4rem;
}
.ficha h1 { font-size: 1.4rem; margin: 0.2rem 0 0.3rem; }
.ficha .organo { margin-bottom: 1rem; }
.ficha dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.8rem;
  margin: 0 0 1rem;
}
.ficha dt { font-size: 0.8125rem; font-weight: 600; color: var(--tinta-suave); }
.ficha dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.resumen-decision {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin: 0.8rem 0 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}
.resumen-decision .dato {
  display: block;
  font-family: var(--titulares);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.resumen-decision .etiqueta { font-size: 0.85rem; color: var(--tinta-suave); }

.tecnicos {
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  margin-top: 0.5rem;
  background: var(--fondo);
}
.tecnicos summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--tinta-suave);
  padding: 0.2rem 0;
}
.tecnicos dl { margin: 0.7rem 0 0; }

.boton {
  display: inline-block;
  font-family: var(--texto);
  background: var(--marca);
  color: #fff;
  padding: 0.75rem 1.3rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
}
.boton:hover { background: var(--accion); }

.analisis, .sustos, .subcontrata {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--ambar);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.1rem;
}
.analisis h2, .sustos h2, .subcontrata h2 {
  font-size: 0.875rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--marca);
  margin: 0 0 0.5rem;
}
.analisis ul { margin: 0; padding-left: 1.2rem; }
.analisis li { margin: 0.3rem 0; }
.sustos dl { margin: 0; display: grid; gap: 0.5rem; }
.sustos dt { font-weight: 700; font-size: 0.9rem; }
.sustos dd { margin: 0; font-size: 0.95rem; }
.subcontrata { border-left-color: #6b2fa8; }
.subcontrata p { margin: 0; font-size: 0.95rem; }
.subcontrata a { color: var(--accion); font-weight: 600; }

/* ---------- Historial ---------- */
.historial { margin-top: 1.4rem; }
.historial h2 { font-size: 1.15rem; }
.historial table {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 10px;
  font-size: 0.9rem;
}
.historial th, .historial td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--borde); }
.historial th { font-size: 0.8125rem; color: var(--tinta-suave); }
.historial td { font-variant-numeric: tabular-nums; }
.historial tr:last-child td { border-bottom: 0; }
.historial a { color: var(--accion); text-decoration: none; }

.vacio { color: var(--tinta-suave); font-size: 0.9rem; padding: 0.2rem 0 0.4rem; margin: 0; }
.cuenta-resultados {
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
  color: var(--tinta-suave);
}
.cuenta-resultados b { font-family: var(--titulares); color: var(--marca); font-size: 1.05rem; }

.atajo-inline { color: var(--accion); font-weight: 700; text-decoration: none; }
.atajo-inline:hover { text-decoration: underline; }

/* ---------- Perfil del usuario ---------- */
.perfil-resumen {
  margin: 0;
  font-size: 0.9rem;
  color: var(--tinta-suave);
}
.perfil-resumen .perfil-texto { font-weight: 600; color: var(--tinta); }
.editar-perfil {
  font-family: var(--texto);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--marca);
  background: var(--blanco);
  border: 1.5px solid var(--borde);
  border-radius: 99px;
  padding: 0.35rem 0.9rem;
  margin-left: 0.3rem;
  cursor: pointer;
}
.editar-perfil:hover { border-color: var(--accion); color: var(--accion); }

dialog#dialogo-perfil {
  border: none;
  border-radius: 12px;
  border-top: 4px solid var(--ambar);
  box-shadow: 0 12px 40px rgba(18, 60, 95, 0.3);
  padding: 1.4rem 1.6rem;
  max-width: 26rem;
  width: calc(100vw - 2rem);
  font-family: var(--texto);
  color: var(--tinta);
}
dialog#dialogo-perfil::backdrop { background: rgba(18, 60, 95, 0.45); }
.form-perfil h2 { margin: 0 0 0.2rem; font-size: 1.3rem; }
.form-perfil > p { margin: 0 0 1rem; color: var(--tinta-suave); font-size: 0.95rem; }
.form-perfil fieldset {
  border: 1px solid var(--borde);
  border-radius: 8px;
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.9rem;
}
.form-perfil legend { font-weight: 700; font-size: 0.9rem; padding: 0 0.3rem; }
.form-perfil label { display: block; padding: 0.35rem 0; font-size: 0.95rem; }
.form-perfil .campo { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.9rem; }
.form-perfil .campo select {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  font-family: var(--texto);
  font-size: 0.95rem;
  padding: 0.55rem 0.7rem;
  border: 1.5px solid var(--borde);
  border-radius: 8px;
}
.form-perfil .acciones { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.4rem; }
.form-perfil .boton { border: none; cursor: pointer; }
.secundario {
  font-family: var(--texto);
  background: none;
  border: none;
  color: var(--tinta-suave);
  cursor: pointer;
  font-size: 0.9rem;
  text-decoration: underline;
  padding: 0.5rem;
}

footer { text-align: center; padding: 1.5rem; color: var(--tinta-suave); font-size: 0.85rem; }

@media (max-width: 640px) {
  .cabecera { flex-wrap: wrap; gap: 0.2rem 0.8rem; padding: 0.6rem 0.9rem; }
  main { padding: 0.9rem; }
  .resumen-decision { grid-template-columns: 1fr 1fr; }

  /* Historial: la tabla se apila en tarjetas legibles */
  .historial thead { display: none; }
  .historial table, .historial tbody, .historial tr, .historial td { display: block; width: 100%; }
  .historial tr { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--borde); }
  .historial tr:last-child { border-bottom: 0; }
  .historial td { padding: 0.1rem 0; border: 0; }
  .historial td::before {
    content: attr(data-etiqueta) ": ";
    font-weight: 600;
    color: var(--tinta-suave);
    font-size: 0.8125rem;
  }
  .historial td[data-etiqueta="Objeto"]::before { content: ""; }
}