:root {
  --bg:#f4f7fa;
  --line: #dce4eb;
  --ink:#172b3a;
  --ink-3:#596c7a
}
:root[data-theme="dark"] {
  --accent:#63c8ee;
  --accent-soft:#163746;
  --bg:#0d161f;
  --bg-2:#16232e;
  --bg-sunk:#1b2c38;
  --ink:#edf5fb;
  --ink-2:#c3d1dc;
  --ink-3:#a6b8c5;
  --line:#314452;
  --line-soft:#243744;
  --ok:#71d3b1;
  --ok-soft:#153a30;
  --warn:#efbd67;
  --warn-soft:#392e1c;
  --stop:#ffa499;
  --stop-soft:#3c2525;
  --sobre-acento:#102531;
  --sobre-alerta:#102531
}
body {
  background:var(--bg)
}
[hidden] {
  display:none!important
}
.app-working .app-status {
  margin-top:0;
  padding:7px 10px
}
.app-progress {
  line-height:1.3
}
.app-progress progress {
  margin-top:6px
}
.cierre .b {
  width:100%
}
.app-working .ficha {
  border-radius:12px
}
.cierre {
  padding:12px!important
}
.cierre .b {
  min-height:44px
}
.app-progress {
  margin-bottom:8px
}
.tira-fotos:has(img:only-child) {
  grid-template-columns:1fr
}
.tira-fotos:has(img:only-child) img.miniatura {
  height:210px!important;
  max-width:480px
}
.app-gallery img {
  max-width:100%!important
}
.app-gallery.zoom img {
  max-width:none!important
}
.lista {
  border-radius:12px;
  box-shadow:none!important
}
.bloque-resumen {
  background:var(--bg-2);
  padding:20px
}
.bloque-resumen h3 {
  margin-bottom:14px
}
#dia-fecha {
  display:none
}
@media(max-width:900px) {
  header.barra {
  gap:10px
}
.app-brand {
  flex:1;
  min-width:0
}
.app-brand small {
  font-size:9px;
  letter-spacing:.025em;
  white-space:nowrap
}
header.barra .quien {
  gap:7px
}
header.barra .quien .texto {
  max-width:95px
}

}
@media(min-width:901px) {
  #lista-propiedades .fila {
  grid-template-columns:120px minmax(0,1fr) 210px;
  align-items:center;
  min-height:68px
}
#lista-propiedades .fila .detalle {
  grid-column:2;
  grid-row:1
}
#lista-propiedades .fila .marcas {
  grid-column:3;
  grid-row:1;
  flex-direction:row;
  gap:10px;
  justify-content:flex-end
}
.fila .marcas {
  align-items:flex-end
}

}
@media(min-width:901px) {
  nav.pestanas {
  padding-top:12px
}
nav.pestanas button {
  min-height:37px;
  padding:8px 12px
}
.app-nav-label {
  padding-top:16px;
  padding-bottom:6px
}
.fila .marcas {
  align-items:center
}

}
.resumen-dia,.resumen-hoy,#res-hoy,.fila.lim {
  box-shadow:none!important;
  border-radius:12px!important
}
.ritmo button.barra {
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer
}
.ritmo button.barra:focus-visible {
  outline:2px solid var(--accent)
}
@media(min-width:901px) {
  #dia-fecha {
  display:none
}
.fila.lim {
  padding-top:14px;
  padding-bottom:14px
}
.lim-info {
  gap:2px!important
}
.grupo {
  margin-bottom:20px
}
.grupo>h3 {
  font-size:18px
}
.lim-cabeza {
  min-height:26px
}
.asignar button {
  min-height:44px
}

}
header.barra {
  height:64px;
  box-sizing:border-box;
  padding:8px 28px;
  top:0;
  z-index:20;
  background:var(--bg-2);
  backdrop-filter:none
}
.marca-profresh img,header.barra img {
  width:48px!important;
  height:48px!important;
  object-fit:contain;
  border-radius:10px
}
.app-brand {
  font-size:17px;
  font-weight:700;
  line-height:1.15
}
.app-brand small {
  display:block;
  font-size:11px;
  font-weight:500;
  color:var(--ink-3);
  letter-spacing:.08em;
  margin-top:4px;
  text-transform:uppercase
}
main {
  max-width:1200px;
  padding:30px 36px 70px
}
h2 {
  font-size:26px;
  letter-spacing:-.035em
}
h3 {
  letter-spacing:-.02em
}
.sub {
  max-width:720px;
  line-height:1.55
}
.caja,.tarjeta,.bloque-resumen {
  border-radius:14px;
  box-shadow:none!important;
  border:1px solid var(--line)
}
.fila {
  border-radius:12px;
  box-shadow:none!important;
  padding:16px 18px
}
.fila .titulo {
  font-weight:650
}
.fila .detalle {
  line-height:1.5
}
.b {
  min-height:42px;
  border-radius:9px
}
.b.principal {
  box-shadow:none
}
.respuesta-dada {
  min-height:46px!important;
  padding:10px 14px!important
}
.paso.plegada {
  cursor:pointer
}
.paso {
  border-radius:12px
}
.paso .pregunta {
  line-height:1.5
}
input,select,textarea {
  font-size:16px;
  border-radius:9px;
  min-height:44px
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #4dbfea;
  outline-offset:3px
}
.app-nav-label {
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--ink-3);
  padding:23px 14px 9px;
  text-transform:uppercase
}
.app-nav-label:first-child {
  padding-top:6px
}
@media(min-width:901px) {
  nav.pestanas {
  position:fixed;
  top:64px;
  bottom:0;
  left:0;
  width:220px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
  padding:20px 14px;
  background:var(--bg-2);
  border-right:1px solid var(--line);
  mask-image:none;
  -webkit-mask-image:none;
  gap:4px
}
nav.pestanas button {
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  border-radius:9px;
  min-height:43px;
  flex-shrink:0;
  padding:10px 13px
}
nav.pestanas button[aria-selected=true] {
  box-shadow:inset 3px 0 #4dbfea
}
#panel main {
  margin-left:220px;
  width:calc(100% - 220px);
  box-sizing:border-box
}
nav.barra-baja {
  display:none
}
/* Resumen y Estadísticas, en el computador: tarjetas en una grilla, todas
   del mismo alto en cada fila (stretch). Con «start» cada tarjeta medía lo
   suyo y quedaban escalones y huecos (19-oct-2026). */
#resumen-cuerpo,#est-cuerpo {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px;
  align-items:stretch
}
#resumen-cuerpo {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
#resumen-cuerpo>*,#est-cuerpo>* {
  margin:0;
  min-width:0
}
#resumen-cuerpo>:first-child,#est-cuerpo>:first-child {
  grid-column:1/-1
}

}
/* Estadísticas va a dos columnas solo cuando cada una tiene ancho para una
   tabla de cuatro columnas sin cortar el nombre del departamento. Bajo
   1200 px, con el menú lateral de 220, cada columna quedaba en 290 px. */
@media(min-width:1200px) {
  #est-cuerpo {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
/* Una tarjeta que queda sola en su fila (por ejemplo, al elegir un
   departamento no hay tabla «Por departamento») toma el ancho entero. */
#est-cuerpo>.bloque-resumen:nth-child(even):last-child {
  grid-column:1/-1
}
/* Los dos gráficos van lado a lado: misma altura de barras. */
#est-cuerpo .semana-est {
  height:150px
}

}
/* Dentro de cada tarjeta, el contenido ocupa todo el alto: el pie del
   gráfico queda abajo y alineado con el de la tarjeta vecina. */
#est-cuerpo>.bloque-resumen {
  display:flex;
  flex-direction:column
}
#est-cuerpo>.bloque-resumen>.ayuda:last-child {
  margin-top:auto!important;
  padding-top:.5rem
}
/* Los tres números del mes, parejos: el número arriba y el rótulo abajo,
   aunque un rótulo ocupe dos líneas y otro una. */
.numeros.tres .numero {
  align-content:start
}
.numeros.tres .numero .rotulo {
  line-height:1.35
}
@media(max-width:600px) {
  /* En el teléfono la tarjeta pierde aire por dentro: con 20 px por lado la
     tabla de cuatro columnas dejaba 98 px para el nombre del departamento. */
  .bloque-resumen {
  padding:16px 14px
}
.tabla-est .encabezado,.tabla-est .renglon {
  grid-template-columns:minmax(0,1fr) 2.6rem 2.6rem 3rem;
  gap:.3rem;
  padding:.55rem .65rem
}
.tabla-est.sin-antes .encabezado,.tabla-est.sin-antes .renglon {
  grid-template-columns:minmax(0,1fr) 2.6rem
}
.numeros.tres {
  gap:.4rem
}
.numeros.tres .numero {
  padding:.7rem .65rem
}
.numeros.tres .numero .valor {
  font-size:var(--t-xl)
}
/* El filtro de anfitrión y el de departamento, uno bajo el otro y al ancho
   entero: lado a lado se cortaba el nombre. */
#v-estadisticas .mes-mando select {
  flex:1 1 100%
}

}
.tira-fotos {
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px!important
}
.tira-fotos img.miniatura {
  width:100%!important;
  height:150px!important;
  object-fit:cover;
  border-radius:10px;
  cursor:zoom-in
}
.fila.con-foto .miniatura {
  width:80px!important;
  height:70px!important
}
.app-gallery {
  position:fixed;
  inset:0;
  background:rgba(5,15,23,.96);
  z-index:120;
  display:flex;
  flex-direction:column;
  padding:18px;
  box-sizing:border-box;
  color:white
}
.app-gallery header {
  display:flex;
  align-items:center;
  gap:12px
}
.app-gallery header strong {
  flex:1
}
.app-gallery button {
  color:white;
  background:#253c4b;
  border:1px solid #68808e;
  border-radius:10px;
  min-height:44px;
  padding:10px 18px;
  cursor:pointer
}
.app-gallery .image-area {
  flex:1;
  overflow:auto;
  display:grid;
  place-items:center;
  min-height:0;
  margin:16px 0
}
.app-gallery img {
  max-width:100%;
  max-height:100%;
  object-fit:contain
}
.app-gallery.zoom img {
  max-width:none;
  max-height:none;
  width:150%;
}
.app-gallery footer {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px
}
.app-drawer {
  position:fixed!important;
  right:0;
  top:64px;
  bottom:0;
  width:min(600px,100%);
  z-index:55;
  margin:0!important;
  overflow:auto;
  border-radius:0!important;
  padding:24px!important;
  background:var(--bg-2);
  box-shadow:-16px 0 60px #10253126!important;
  box-sizing:border-box
}
.app-drawer .botones {
  position:sticky;
  bottom:-24px;
  background:var(--bg-2);
  padding:16px 0;
  border-top:1px solid var(--line);
  z-index:2
}
/* La sección «Calendarios» de la ficha tiene sus propios botones (Agregar,
   Probar, Guardar el link). La regla de arriba los dejaba fijos al fondo, donde
   tapaban el campo para pegar el link, y además se encimaban con el «Guardar»
   del departamento (19-oct-2026). Sus botones van en su lugar, y la sección se
   dibuja por encima de la barra fija del departamento cuando se llega a ella. */
.app-drawer .calendarios-depto {
  position:relative;
  z-index:3;
  background:var(--bg-2)
}
.app-drawer .calendarios-depto .botones {
  position:static;
  padding:0;
  border-top:0;
  background:none
}
.app-drawer fieldset {
  border:0;
  border-top:1px solid var(--line);
  padding:20px 0;
  margin:12px 0
}
.app-drawer legend {
  font-size:14px;
  font-weight:700;
  padding-right:12px
}
.app-drawer .campos {
  display:grid
}
.app-close {
  float:right;
  min-width:44px;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--bg-2);
  color:var(--ink);
  cursor:pointer
}
.app-shade {
  position:fixed;
  inset:64px 0 0;
  background:#10253166;
  z-index:50
}
.app-status {
  font-size:12px;
  color:var(--ink-3);
  padding:10px 14px;
  background:var(--bg-sunk);
  border-radius:8px;
  margin:12px 0;
  display:flex;
  gap:8px;
  align-items:center
}
.app-status::before {
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--ok)
}
.app-legend {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--ink-3);
  margin:14px 0
}
.app-agenda {
  display:grid;
  gap:8px
}
.app-agenda button {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px;
  color:var(--ink);
  cursor:pointer;
  text-align:left
}
.app-progress {
  margin-bottom:12px;
  font-size:13px;
  font-weight:600
}
.app-progress progress {
  width:100%;
  height:6px;
  display:block;
  margin-top:8px;
  accent-color:var(--accent)
}
.cierre {
  position:sticky;
  bottom:12px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px;
  z-index:8;
  box-shadow:0 4px 24px #10253115
}
@media(max-width:900px) {
  header.barra {
  padding:8px 16px
}
.app-brand {
  font-size:15px
}
header.barra .quien .texto {
  font-size:11px
}
main {
  padding:22px 16px 100px!important
}
h2 {
  font-size:23px
}
nav.pestanas {
  display:none
}
.app-nav-label {
  display:none
}
.b {
  min-height:44px
}
.fila {
  padding:14px
}
.tira-fotos {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.tira-fotos img.miniatura {
  height:140px!important
}
.app-drawer {
  width:100%;
  padding:20px!important
}
.app-drawer .botones {
  bottom:-20px
}
.app-working .barra-baja {
  display:none!important
}
.app-working main {
  padding-bottom:30px!important
}
.app-gallery {
  padding:12px
}
.app-gallery header strong {
  font-size:13px
}
.app-gallery button {
  padding:8px 12px
}
.cierre {
  bottom:8px
}
.numeros .numero {
  font-size:30px
}

}
.app-theme {
  background:var(--bg-sunk);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:9px;
  width:44px;
  height:44px;
  flex:none;
  cursor:pointer;
  font:inherit;
  font-size:21px
}
header.barra .quien {
  margin-left:0
}
.app-brand {
  margin-right:auto
}
@media(max-width:900px) {
  .app-theme {
  width:36px;
  height:44px
}

}
.app-discard {
  background:var(--bg-2);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
  max-width:min(420px,calc(100% - 32px));
  box-sizing:border-box;
  box-shadow:0 18px 60px #07121e40
}
.app-discard::backdrop {
  background:#07121e80
}
.app-discard p {
  margin:12px 0;
  line-height:1.5;
  color:var(--ink-2)
}
@media(min-width:901px) {
  #lista-propiedades .fila .dato {
  grid-column:2 / span 2;
  grid-row:1;
  display:flex;
  align-items:center;
  gap:18px;
  font-size:var(--t-s)
}
#lista-propiedades .fila .dato>:first-child {
  flex:1;
  min-width:0
}
#lista-propiedades .fila .dato>:not(:first-child) {
  white-space:nowrap
}
#lista-propiedades .fila .marcas:empty {
  display:none
}

}
@media(min-width:901px) {
  #lista-propiedades .fila .dato {
  grid-column:2 / span 2!important
}

}
@media (max-width: 900px) {
  .app-desktop-prefix { display: none; }
}
@media (max-width: 360px) {
  header.barra .quien .inicial { display: none; }
  header.barra .quien .texto { max-width: 80px; }
}
/* Cómo salieron y los avisos (19-oct-2026). La tabla por persona lleva
   rótulos más largos («Devueltas») que la de cambio, y necesita columnas más
   anchas para que no se monten. */
.tabla-est.ancha .encabezado,.tabla-est.ancha .renglon {
  grid-template-columns:minmax(0,1fr) 4.4rem 4.4rem 4.4rem
}
.tabla-est .num.ojo {
  color:var(--warn);
  font-weight:700
}
.bloque-resumen .sub-bloque {
  font-family:var(--display);
  font-size:var(--t-xs);
  font-weight:700;
  color:var(--ink-3);
  margin:1.1rem 0 .5rem
}
@media(max-width:600px) {
  .tabla-est.ancha .encabezado,.tabla-est.ancha .renglon {
  grid-template-columns:minmax(0,1fr) 3.5rem 3.9rem 3.5rem
}

}