/* =========================================================================
   MBC APP - hoja de estilos
   Misma identidad visual que el portal: azul acero #527898, tarjetas suaves,
   cuadricula de accesos. Pensada primero para telefono.
   ========================================================================= */

:root{
  --az:#527898;
  --az-osc:#3b5b76;
  --az-hond:#2c4459;
  --az-tenue:#eef3f7;
  --az-borde:#dbe6ee;

  --tinta:#2f3b45;
  --gris:#8a99a6;
  --linea:#eef2f5;
  --fondo:#f4f7f9;

  --ok:#2f7d5b;
  --rojo:#b3453f;
  --rojo-tenue:#f8ebea;
  --ambar:#b8801a;

  --r:16px;
  --sombra:0 4px 14px rgba(47,59,69,.06);
  --sombra-alta:0 10px 30px rgba(47,59,69,.10);
  --fuente:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }
body{
  font-family:var(--fuente);
  background:var(--fondo);
  color:var(--tinta);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  /* Respeta la zona segura de los telefonos con muesca */
  padding-bottom:env(safe-area-inset-bottom);
}
a{ color:var(--az-osc); }
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }

/* ---------- Barra superior ---------- */
.barra{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(115deg, var(--az-hond), var(--az));
  color:#fff;
  padding-top:env(safe-area-inset-top);
  box-shadow:0 2px 10px rgba(44,68,89,.18);
}
.barra-in{ display:flex; align-items:center; gap:10px; padding:10px 14px; }
.barra-tit{ min-width:0; }
.barra-tit strong{ display:block; font-size:15px; font-weight:650; line-height:1.2; }
.barra-tit span{
  display:block; font-size:11.5px; color:#c2d6e4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw;
}
.barra-sp{ flex:1 1 auto; }
.barra-btn{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:0 0 auto;
  border-radius:10px; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12); color:#fff; cursor:pointer;
  text-decoration:none; padding:0;
}
.barra-btn:hover{ background:rgba(255,255,255,.24); }
.barra-btn svg{ width:17px; height:17px; }

/* ---------- Contenedor ---------- */
.cont{ max-width:760px; margin:0 auto; padding:16px 14px 32px; }

/* ---------- Saludo ---------- */
.saludo{ text-align:center; margin:6px 0 18px; }
.saludo-logo{ height:52px; width:auto; display:block; margin:0 auto 12px; }
.saludo-emp{
  font-size:11px; font-weight:600; color:var(--gris);
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:4px;
}
.saludo h1{ margin:0; font-size:23px; font-weight:750; color:#2b3138; line-height:1.2; overflow-wrap:anywhere; }
.saludo-sub{ margin:5px 0 0; font-size:13px; color:var(--gris); }

/* ---------- Tarjeta de cartera ---------- */
.tarjeta-cartera{
  display:block; text-decoration:none; color:inherit;
  background:#fff; border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--sombra); padding:16px 18px; margin-bottom:18px;
  transition:transform .15s, box-shadow .15s;
}
.tarjeta-cartera:active{ transform:scale(.99); }
.tc-fila{ display:flex; align-items:center; gap:14px; }
.tc-fila > div{ flex:1 1 auto; min-width:0; }
.tc-l{
  font-size:11px; font-weight:600; color:var(--gris);
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:5px;
}
.tc-v{ font-size:27px; font-weight:750; color:var(--az-hond); line-height:1.05; letter-spacing:-.02em; }
.tc-v.al-dia{ color:var(--ok); font-size:21px; }
.tc-p{ font-size:12.5px; color:var(--gris); margin-top:4px; }
.tc-p b{ color:var(--rojo); font-weight:650; }
.tc-ir{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  background:var(--az-tenue); color:var(--az);
  display:flex; align-items:center; justify-content:center;
}
.tc-ir svg{ width:17px; height:17px; }

/* ---------- Cuadricula de modulos ---------- */
.rejilla{
  display:grid; gap:12px;
  grid-template-columns:repeat(3, minmax(0,1fr));
  margin-bottom:22px;
}
@media (max-width:400px){ .rejilla{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:620px){ .rejilla{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

/* ---------- Grupo plegable de modulos ---------- */
/* Misma tarjeta que la de cartera, pero es un <details>: al tocarla despliega
   los modulos que se consultan de vez en cuando en vez de navegar. */
.tarjeta-grupo{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--sombra); margin-bottom:22px; overflow:hidden;
}
.tarjeta-grupo > summary{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; cursor:pointer; list-style:none;
  transition:background .15s;
}
/* El triangulo por omision se sustituye por el chevron de la derecha */
.tarjeta-grupo > summary::-webkit-details-marker{ display:none; }
.tarjeta-grupo > summary::marker{ content:''; }
.tarjeta-grupo > summary:hover{ background:#fbfdfe; }

.tg-ico{
  flex:0 0 auto; width:42px; height:42px; border-radius:13px;
  background:var(--az-tenue); color:var(--az-osc);
  display:flex; align-items:center; justify-content:center;
}
.tg-ico svg{ width:21px; height:21px; }

.tg-txt{ flex:1 1 auto; min-width:0; }
.tg-t{ display:block; font-size:15px; font-weight:700; color:var(--az-hond); }
.tg-s{
  display:block; margin-top:2px; font-size:11.5px; color:var(--gris);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.tg-v{
  flex:0 0 auto; width:17px; height:17px; color:var(--gris);
  transition:transform .18s ease;
  /* En SVG el origen del giro es la esquina del viewBox, no el centro */
  transform-box:fill-box; transform-origin:center;
}
.tarjeta-grupo[open] > summary{
  background:#fbfdfe; border-bottom:1px solid var(--linea);
}
.tarjeta-grupo[open] > summary .tg-v{ transform:rotate(180deg); }

/* Dentro de la tarjeta la cuadricula no lleva su margen inferior */
.tg-rejilla{ margin:0; padding:14px; background:#fbfdfe; }
.tg-rejilla .mod{ background:#fff; }

/* ---------- Enlace al resto de un bloque ---------- */
.bloque-mas{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:10px; padding:10px; border-radius:11px;
  border:1px solid var(--az-borde); background:#fff; color:var(--az-osc);
  font-size:12.5px; font-weight:650; text-decoration:none;
}
.bloque-mas:hover{ background:var(--az-tenue); }
.bloque-mas svg{ width:14px; height:14px; }

.mod{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--sombra); padding:16px 8px;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  text-decoration:none; color:inherit; text-align:center;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.mod:active{ transform:scale(.97); }
.mod:hover{ box-shadow:var(--sombra-alta); border-color:var(--az-borde); }
.mod-ico{
  position:relative;                 /* ancla del globo de notificaciones */
  width:46px; height:46px; border-radius:14px;
  background:var(--az-tenue); color:var(--az);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.mod-ico svg{ width:23px; height:23px; }

/* ---------- Globo de notificaciones sin leer ---------- */
/* Va pegado a la esquina del icono, como en cualquier app. El borde del color
   del fondo lo recorta del icono y hace que se lea a cualquier tamaño. */
.globo{
  position:absolute; top:-5px; right:-6px;
  min-width:20px; height:20px; padding:0 6px;
  border-radius:99px; border:2px solid var(--fondo);
  background:#e0352b; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:750; line-height:1;
  font-variant-numeric:tabular-nums;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
/* Late una vez al aparecer, para que se note sin resultar molesto */
@keyframes globo-entra{
  0%{ transform:scale(.4); opacity:0; }
  60%{ transform:scale(1.12); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}
.globo:not(.oculto){ animation:globo-entra .32s ease-out; }
@media (prefers-reduced-motion:reduce){ .globo{ animation:none !important; } }

/* ---------- Notificaciones ---------- */
.notis{ display:flex; flex-direction:column; gap:9px; }
.noti{
  position:relative; display:flex; align-items:flex-start; gap:12px;
  background:#fff; border:1px solid var(--linea); border-left:3px solid var(--az);
  border-radius:14px; box-shadow:var(--sombra); padding:13px 14px;
}
/* Las leidas se apagan pero siguen legibles */
.noti.leida{ background:#fbfcfd; border-left-color:var(--linea); box-shadow:none; }
.noti.t-aviso{ border-left-color:var(--ambar); }
.noti.t-urgente{ border-left-color:var(--rojo); }
.noti.leida.t-aviso, .noti.leida.t-urgente{ border-left-color:var(--linea); }

.noti-ico{
  flex:0 0 auto; width:38px; height:38px; border-radius:12px;
  background:var(--az-tenue); color:var(--az-osc);
  display:flex; align-items:center; justify-content:center;
}
.noti-ico svg{ width:19px; height:19px; }
.noti.t-aviso .noti-ico{ background:#fdf3e2; color:var(--ambar); }
.noti.t-urgente .noti-ico{ background:var(--rojo-tenue); color:var(--rojo); }
.noti.leida .noti-ico{ background:var(--linea); color:var(--gris); }

/* El cuerpo es el boton: toda la tarjeta se puede tocar */
.noti-cuerpo{
  flex:1 1 auto; min-width:0; text-align:left;
  background:none; border:none; padding:0; cursor:pointer;
  font-family:inherit; color:inherit;
}
.noti-hd{ display:flex; align-items:baseline; gap:8px; }
.noti-tit{
  flex:1 1 auto; min-width:0; font-size:14px; font-weight:700;
  color:var(--az-hond); overflow-wrap:anywhere;
}
.noti.leida .noti-tit{ font-weight:650; color:var(--tinta); }
.noti-fecha{ flex:0 0 auto; font-size:11px; color:var(--gris); white-space:nowrap; }
.noti-msg{
  display:block; margin-top:4px; font-size:13px; color:var(--tinta);
  line-height:1.45; overflow-wrap:anywhere;
}
.noti.leida .noti-msg{ color:var(--gris); }
.noti-pie{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.noti-pie:empty{ display:none; }
.etq.tipo{ text-transform:uppercase; letter-spacing:.05em; font-size:9.5px; }
.noti.t-aviso .etq.tipo{ background:#fdf3e2; color:var(--ambar); }
.noti.t-urgente .etq.tipo{ background:var(--rojo-tenue); color:var(--rojo); }

.noti-punto{
  position:absolute; top:11px; right:11px;
  width:9px; height:9px; border-radius:50%; background:#e0352b;
}
.mod-tit{
  font-size:11.5px; font-weight:700; color:#5a6570;
  letter-spacing:.02em; text-transform:uppercase; line-height:1.25;
}

/* ---------- Bloques y listas ---------- */
.bloque{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--sombra); padding:14px 16px; margin-bottom:16px;
}
.bloque-tit{
  margin:0 0 10px; font-size:10.5px; font-weight:700; color:var(--gris);
  letter-spacing:.09em; text-transform:uppercase;
}
.lista-emp{ margin:0; padding:0; list-style:none; }
.lista-emp li{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--linea); font-size:13.5px;
}
.lista-emp li:last-child{ border-bottom:none; }
.lista-emp span{ color:var(--gris); font-size:12px; white-space:nowrap; }

/* ---------- Documentos de cartera ---------- */
.docs{ display:flex; flex-direction:column; gap:10px; }
.doc{
  background:#fff; border:1px solid var(--linea); border-radius:14px;
  box-shadow:var(--sombra); padding:13px 15px;
}
.doc-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.doc-num{ font-size:13px; font-weight:700; color:var(--az-hond); }
.doc-saldo{ font-size:16px; font-weight:750; color:var(--az-hond); white-space:nowrap; }
.doc-con{ font-size:12.5px; color:var(--gris); margin-top:3px; }
.doc-pie{ display:flex; gap:8px; align-items:center; margin-top:9px; flex-wrap:wrap; font-size:11.5px; color:var(--gris); }
.pill{
  display:inline-flex; align-items:center; padding:2px 9px; border-radius:99px;
  font-size:10.5px; font-weight:700; white-space:nowrap;
}
.pill.ok{ background:#e6f3ec; color:var(--ok); }
.pill.warn{ background:#fdf3e0; color:var(--ambar); }
.pill.mal{ background:var(--rojo-tenue); color:var(--rojo); }

/* Totales */
.totales{
  background:linear-gradient(115deg, var(--az-hond), var(--az));
  color:#fff; border-radius:var(--r); padding:18px; margin-bottom:16px;
  box-shadow:var(--sombra-alta);
}
.totales .l{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#c2d6e4; }
.totales .v{ font-size:30px; font-weight:750; letter-spacing:-.02em; margin-top:4px; }
.totales .p{ font-size:12.5px; color:#c9dae6; margin-top:6px; }

/* ---------- Formularios ---------- */
.campo{ display:block; margin-bottom:14px; }
.campo > span{
  display:block; font-size:11px; font-weight:700; color:var(--gris);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px;
}
.campo input, .campo select, .campo textarea{
  width:100%; padding:12px 13px;
  border:1px solid var(--az-borde); border-radius:11px;
  background:#fbfdfe; transition:border-color .15s, background .15s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color:var(--az); background:#fff;
  box-shadow:0 0 0 3px rgba(82,120,152,.14);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:11px; cursor:pointer;
  border:1px solid var(--az-borde); background:#fff; color:var(--az-osc);
  font-size:14px; font-weight:650; text-decoration:none;
  transition:background .15s, transform .08s;
}
.btn:active{ transform:translateY(1px); }
.btn svg{ width:17px; height:17px; flex:0 0 auto; }
.btn-pri{ background:var(--az); border-color:var(--az); color:#fff; }
.btn-pri:hover{ background:var(--az-osc); }
.btn-wa{ background:#25d366; border-color:#1fb955; color:#0a3d1c; }
.btn-wa:hover{ background:#34dd74; }
.btn-ancho{ width:100%; }

/* ---------- Avisos ---------- */
.aviso{
  padding:11px 14px; border-radius:11px; font-size:13px; margin-bottom:14px;
  border:1px solid #e3c893; background:#fdf6e7; color:#7d5b18;
}
.aviso.err{ border-color:#e8c4c1; background:var(--rojo-tenue); color:#8a2f2a; }
.aviso.ok{ border-color:#bfe0cf; background:#e6f3ec; color:#1f5f43; }

.vacio{ text-align:center; padding:40px 18px; color:var(--gris); }
.vacio svg{ width:40px; height:40px; opacity:.4; margin-bottom:12px; }
.vacio strong{ display:block; color:var(--tinta); font-size:15px; margin-bottom:5px; }

/* ---------- Placeholders de carga ---------- */
.esq{
  background:linear-gradient(90deg,#e8eef2 25%,#f4f8fa 50%,#e8eef2 75%);
  background-size:200% 100%; animation:brillo 1.3s ease-in-out infinite;
  border-radius:6px; color:transparent !important; display:inline-block;
  min-width:120px; min-height:1em;
}
@keyframes brillo{ to{ background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce){
  .esq{ animation:none; }
  .mod,.tarjeta-cartera,.btn{ transition:none; }
}

/* ---------- Login ---------- */
.entrar{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom));
  background:linear-gradient(160deg,#eef3f7 0%, #f4f7f9 55%, #e8eff4 100%);
}
.entrar-caja{
  width:100%; max-width:390px;
  background:#fff; border:1px solid var(--linea); border-radius:22px;
  box-shadow:0 18px 50px rgba(47,59,69,.10);
  padding:30px 24px 26px; text-align:center;
}
.entrar-logo{ height:56px; width:auto; display:block; margin:0 auto 16px; }
.entrar-emp{
  font-size:11px; font-weight:600; color:var(--gris);
  letter-spacing:.16em; text-transform:uppercase;
}
.entrar-caja h1{ margin:6px 0 2px; font-size:24px; font-weight:750; color:#2b3138; }
.entrar-sub{ margin:0 0 20px; font-size:13px; color:var(--gris); }
.entrar-caja form{ text-align:left; }

/* ---------- Pase QR ---------- */
.pase{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--sombra); padding:20px; text-align:center; margin-bottom:16px;
}
.pase-qr{
  width:210px; height:210px; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--linea); border-radius:12px; padding:8px;
}
.pase-qr canvas, .pase-qr img{ width:100%; height:100%; display:block; }
.pase h2{ margin:0 0 3px; font-size:19px; font-weight:750; }
.pase .emp{ font-size:12.5px; color:var(--gris); }
.pase .vence{ font-size:12px; color:var(--ambar); margin-top:8px; font-weight:600; }
.pase-acc{ display:flex; flex-direction:column; gap:9px; margin-top:16px; }

/* =========================================================================
   Tabla responsiva con filtros
   ========================================================================= */

.tabla-tools{ display:flex; gap:9px; margin-bottom:12px; }
.busca{ position:relative; flex:1 1 auto; min-width:0; }
.busca svg{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--gris); pointer-events:none;
}
.busca input{
  width:100%; padding:11px 13px 11px 36px;
  border:1px solid var(--az-borde); border-radius:11px; background:#fff;
}
.busca input:focus{
  outline:none; border-color:var(--az);
  box-shadow:0 0 0 3px rgba(82,120,152,.14);
}
.tabla-tools .btn{ flex:0 0 auto; padding:11px 14px; }
.cont-n{
  background:var(--az); color:#fff; font-size:11px; font-weight:700;
  min-width:18px; height:18px; border-radius:99px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
}

.tabla-info{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:12.5px; color:var(--gris); margin-bottom:10px;
}
.tabla-info strong{ color:var(--tinta); }
.tabla-info .limpiar{ margin-left:auto; font-weight:600; font-size:12.5px; }

.tabla-caja{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--sombra); overflow:hidden;
}
table.tabla{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.tabla thead th{
  background:#f7fafc; border-bottom:1px solid var(--linea);
  padding:11px 13px; text-align:left; white-space:nowrap;
  font-size:10.5px; font-weight:700; color:var(--gris);
  letter-spacing:.07em; text-transform:uppercase;
}
table.tabla tbody td{
  padding:12px 13px; border-bottom:1px solid var(--linea); vertical-align:middle;
}
table.tabla tbody tr:last-child td{ border-bottom:none; }
table.tabla .nom{ display:block; font-weight:650; color:var(--tinta); }
table.tabla .sub{ display:block; font-size:11.5px; color:var(--gris); margin-top:2px; }
table.tabla .mono{ font-variant-numeric:tabular-nums; }
table.tabla .num{ white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Por debajo de 760px cada fila se apila como tarjeta */
@media (max-width:760px){
  .tabla-caja{ background:none; border:none; box-shadow:none; overflow:visible; }
  table.tabla, table.tabla tbody, table.tabla tr, table.tabla td{ display:block; width:100%; }
  table.tabla thead{ display:none; }
  table.tabla tbody tr{
    background:#fff; border:1px solid var(--linea); border-radius:14px;
    box-shadow:var(--sombra); margin-bottom:10px; padding:4px 2px;
  }
  table.tabla tbody td{
    display:flex; align-items:baseline; justify-content:space-between; gap:14px;
    padding:8px 13px; border-bottom:1px solid var(--linea); text-align:right;
  }
  table.tabla tbody td:last-child{ border-bottom:none; }
  table.tabla tbody td::before{
    content:attr(data-l); flex:0 0 auto; text-align:left;
    font-size:10.5px; font-weight:700; color:var(--gris);
    letter-spacing:.06em; text-transform:uppercase;
  }
  /* La celda del visitante hace de encabezado de la tarjeta */
  table.tabla tbody td.celda-tit{
    display:block; text-align:left; background:#f7fafc;
    margin:-4px -2px 4px; padding:11px 13px;
    border-radius:13px 13px 0 0; border-bottom:1px solid var(--linea);
  }
  table.tabla tbody td.celda-tit::before{ content:none; }
}

.pag{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:16px; font-size:13px; color:var(--gris);
}
.pag-btn{
  width:38px; height:38px; border-radius:11px;
  border:1px solid var(--az-borde); background:#fff; color:var(--az-osc);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; font-size:18px; font-weight:700;
}
.pag-btn.off{ opacity:.4; pointer-events:none; }

/* ---------- Modal ---------- */
.velo{
  position:fixed; inset:0; z-index:100;
  background:rgba(30,45,58,.5);
  display:none; align-items:flex-end; justify-content:center;
}
.velo.on{ display:flex; }
.modal{
  background:#fff; width:100%; max-width:460px;
  border-radius:20px 20px 0 0;
  box-shadow:0 -10px 40px rgba(20,32,42,.28);
  max-height:92vh; display:flex; flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
}
@media (min-width:620px){
  .velo{ align-items:center; }
  .modal{ border-radius:20px; }
}
.modal-hd{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px; border-bottom:1px solid var(--linea);
}
.modal-hd strong{ font-size:16px; flex:1 1 auto; }
.modal-x{
  width:32px; height:32px; border-radius:10px; cursor:pointer;
  border:1px solid var(--az-borde); background:#fff; color:var(--gris);
  display:flex; align-items:center; justify-content:center; padding:0;
}
.modal-x svg{ width:16px; height:16px; }
.modal-body{ padding:16px 18px 18px; overflow-y:auto; }
.campo-par{ display:flex; gap:10px; }
.campo-par .campo{ flex:1 1 0; min-width:0; }
.modal-acc{ display:flex; gap:9px; margin-top:6px; }
.modal-acc .btn{ flex:1 1 0; justify-content:center; }

/* ---------- Estado de cuenta: filtro y bloques ---------- */
.filtro-emp{ margin-bottom:14px; }
.filtro-emp .campo{ margin-bottom:0; }

.dosbloques{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.blq{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--sombra); padding:15px 16px; position:relative; overflow:hidden;
}
.blq::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; }
.blq-pendiente::before{ background:var(--rojo); }
.blq-pagado::before{ background:var(--ok); }
.blq .l{
  font-size:10.5px; font-weight:700; color:var(--gris);
  letter-spacing:.09em; text-transform:uppercase; margin-bottom:5px;
}
.blq .v{
  font-size:21px; font-weight:750; line-height:1.05; letter-spacing:-.02em;
  color:var(--az-hond); word-break:break-word;
}
.blq-pagado .v{ color:var(--ok); }
.blq .p{ font-size:11px; color:var(--gris); margin-top:4px; }

.btn-pdf{ margin-bottom:16px; }

@media (max-width:360px){
  .dosbloques{ grid-template-columns:1fr; }
}

/* ---------- Modulos genericos ---------- */
.doc-fecha{ font-size:11.5px; color:var(--gris); white-space:nowrap; }
.doc-datos{ margin:9px 0 0; display:grid; grid-template-columns:auto 1fr; gap:3px 12px; font-size:12.5px; }
.doc-datos dt{
  color:var(--gris); font-weight:600; font-size:10.5px;
  letter-spacing:.05em; text-transform:uppercase; padding-top:2px;
}
.doc-datos dd{ margin:0; overflow-wrap:anywhere; }

.anexos{ display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; }
.anexo-img{
  width:64px; height:64px; border-radius:10px; overflow:hidden;
  border:1px solid var(--linea); display:block; flex:0 0 auto; background:#f7fafc;
}
.anexo-img img{ width:100%; height:100%; object-fit:cover; display:block; }
/* ---------- Adjuntos que no son imagen ---------- */
/* Con el icono del tipo: de un vistazo se ve si es un PDF, un Excel o un
   Word, sin tener que leer la extension al final del nombre. */
.anexo-arch{
  display:inline-flex; align-items:center; gap:9px; max-width:100%;
  font-size:12px; color:var(--tinta); text-decoration:none;
  border:1px solid var(--linea); border-radius:11px; padding:7px 11px 7px 8px;
  background:#fff;
}
.anexo-arch:hover{ border-color:var(--az-borde); background:#fbfdfe; }

.anexo-ico{
  position:relative; flex:0 0 auto; width:26px; height:30px;
  display:flex; align-items:center; justify-content:center; color:var(--gris);
}
.anexo-ico svg{ width:26px; height:30px; }
/* La etiqueta del tipo va sobre la hoja, como en un gestor de archivos */
.anexo-ext{
  position:absolute; left:0; right:0; bottom:4px;
  font-size:6.5px; font-weight:800; letter-spacing:.02em;
  text-align:center; color:#fff;
}
.anexo-arch.t-pdf .anexo-ico{ color:#c4453f; }
.anexo-arch.t-doc .anexo-ico{ color:#2a5fb8; }
.anexo-arch.t-xls .anexo-ico{ color:#1f7a4d; }
.anexo-arch.t-ppt .anexo-ico{ color:#c2571f; }
.anexo-arch.t-zip .anexo-ico{ color:#8a6d1f; }
.anexo-arch.t-txt .anexo-ico, .anexo-arch.t-otro .anexo-ico{ color:var(--gris); }
/* El fondo de la etiqueta lo pone el propio trazo del icono */
.anexo-arch.t-pdf .anexo-ext{ background:#c4453f; }
.anexo-arch.t-doc .anexo-ext{ background:#2a5fb8; }
.anexo-arch.t-xls .anexo-ext{ background:#1f7a4d; }
.anexo-arch.t-ppt .anexo-ext{ background:#c2571f; }
.anexo-arch.t-zip .anexo-ext{ background:#8a6d1f; }
.anexo-arch.t-txt .anexo-ext{ background:var(--gris); }
.anexo-ext:empty{ display:none; }

.anexo-txt{ min-width:0; }
.anexo-txt .nom{
  display:block; font-weight:650; max-width:190px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.anexo-txt .sub{ display:block; font-size:10.5px; color:var(--gris); margin-top:1px; }

/* Hueco cuando el modulo no tiene buscador, para que el boton de filtros
   quede alineado igual que en los que si lo tienen */
.busca-hueco{ flex:1 1 auto; }
.celda-anexos .anexos{ margin-top:0; }
@media (max-width:760px){
  table.tabla tbody td.celda-anexos{ display:block; text-align:left; }
  table.tabla tbody td.celda-anexos::before{ display:block; margin-bottom:6px; }
}

/* ---------- Ficha de detalle ---------- */
.ficha{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--sombra); padding:16px 18px; margin-bottom:14px;
}
.ficha h1{ margin:0 0 12px; font-size:19px; font-weight:750; color:var(--az-hond); line-height:1.25; }
.ficha-datos{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13px; }
.ficha-datos dt{
  color:var(--gris); font-weight:700; font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; padding-top:2px;
}
.ficha-datos dd{ margin:0; overflow-wrap:anywhere; }

/* ---------- Pestañas ---------- */
.pest{
  display:flex; gap:6px; overflow-x:auto; margin-bottom:12px;
  padding-bottom:2px; -webkit-overflow-scrolling:touch;
}
.pest-b{
  flex:0 0 auto; cursor:pointer; white-space:nowrap;
  background:#fff; border:1px solid var(--linea); border-radius:99px;
  padding:8px 14px; font-size:12.5px; font-weight:650; color:#5a6570;
}
.pest-b.on{ background:var(--az); border-color:var(--az); color:#fff; }
.pest-n{
  display:inline-block; margin-left:5px; font-size:11px; opacity:.75;
}
/* Sin JS se ven todos los paneles seguidos, que es preferible a no ver nada */
.panel{ display:block; margin-bottom:14px; }
@media (min-width:1px){
  .pest ~ .panel{ display:none; }
  .pest ~ .panel.on{ display:block; }
}

.lista-num, .lista-pun{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--sombra); margin:0; padding:6px 16px 6px 34px;
}
.lista-num li, .lista-pun li{
  padding:9px 0; border-bottom:1px solid var(--linea); font-size:13.5px;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.lista-num li:last-child, .lista-pun li:last-child{ border-bottom:none; }

.galeria{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px; }
.galeria figure{ margin:0; }
.galeria a{ display:block; border:1px solid var(--linea); border-radius:12px; overflow:hidden; background:#fff; }
.galeria img{ width:100%; height:130px; object-fit:cover; display:block; }
.galeria-arch{ display:block; padding:26px 10px; text-align:center; font-size:12px; color:var(--az-osc); }
.galeria figcaption{ font-size:11.5px; color:var(--gris); text-align:center; margin-top:5px; }

/* ---------- Icono y boton Ver en las filas ---------- */
.celda-id{ display:flex; align-items:center; gap:11px; }
.celda-txt{ min-width:0; }
.fila-ico{
  width:36px; height:36px; border-radius:11px; flex:0 0 auto;
  background:var(--az-tenue); color:var(--az);
  display:flex; align-items:center; justify-content:center;
}
.fila-ico svg{ width:19px; height:19px; }

.celda-ver{ width:1%; white-space:nowrap; }
.btn-ver{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:9px; text-decoration:none;
  border:1px solid var(--az-borde); background:#fff; color:var(--az-osc);
  font-size:12.5px; font-weight:650;
}
.btn-ver:hover{ background:var(--az-tenue); border-color:var(--az); }
.btn-ver svg{ width:15px; height:15px; }
@media (max-width:760px){
  /* En tarjeta el boton ocupa el ancho, para que sea comodo con el pulgar */
  table.tabla tbody td.celda-ver{ display:block; padding:10px 13px; }
  table.tabla tbody td.celda-ver::before{ content:none; }
  .btn-ver{ width:100%; justify-content:center; padding:10px; }
}

/* =========================================================================
   Detalle de mantenimiento
   ========================================================================= */
.ficha-top{ display:flex; align-items:flex-start; gap:13px; margin-bottom:14px; }
.ficha-ico{
  width:46px; height:46px; border-radius:14px; flex:0 0 auto;
  background:var(--az-tenue); color:var(--az);
  display:flex; align-items:center; justify-content:center;
}
.ficha-ico svg{ width:24px; height:24px; }
.ficha-tit{ min-width:0; }
.ficha-tit h1{ margin:0; font-size:19px; font-weight:750; color:var(--az-hond); line-height:1.25; }
.ficha-tipo{
  margin:3px 0 0; font-size:11px; font-weight:700; color:var(--gris);
  letter-spacing:.07em; text-transform:uppercase;
}

.ficha-estado{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:99px; font-size:12.5px; font-weight:700;
  margin-bottom:14px;
}
.ficha-estado svg{ width:15px; height:15px; }
.ficha-estado.ok{ background:#e6f3ec; color:var(--ok); }
.ficha-estado.curso{ background:#fdf3e0; color:var(--ambar); }

.ficha-meta{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:1px;
  background:var(--linea); border-radius:12px; overflow:hidden;
}
.ficha-meta > div{ background:#fbfdfe; padding:10px 12px; }
.ficha-meta .l{
  display:block; font-size:10px; font-weight:700; color:var(--gris);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:3px;
}
.ficha-meta .v{ font-size:13px; font-weight:600; }

/* ---------- Secciones apiladas ---------- */
.sec{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--sombra); margin-bottom:14px; overflow:hidden;
}
.sec-hd{
  display:flex; align-items:center; gap:10px; margin:0;
  padding:13px 16px; border-bottom:1px solid var(--linea); background:#fbfdfe;
  font-size:13.5px; font-weight:700; color:var(--az-hond);
}
.sec-ico{
  width:30px; height:30px; border-radius:9px; flex:0 0 auto;
  background:var(--az-tenue); color:var(--az);
  display:flex; align-items:center; justify-content:center;
}
.sec-ico svg{ width:16px; height:16px; }
.sec-n{
  margin-left:auto; flex:0 0 auto;
  background:var(--az-tenue); color:var(--az-osc);
  font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:99px;
}

.items{ margin:0; padding:0; list-style:none; }
.items li{
  display:flex; align-items:flex-start; gap:11px;
  padding:12px 16px; border-bottom:1px solid var(--linea); font-size:13.5px;
}
.items li:last-child{ border-bottom:none; }
.item-n{
  flex:0 0 auto; width:22px; height:22px; border-radius:7px;
  background:var(--az-tenue); color:var(--az-osc);
  font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.item-txt{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; line-height:1.45; }
.items.punto li::before{
  content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%;
  background:var(--az); margin-top:8px;
}

/* Tarjeta de tecnico */
.items.tec li{ flex-direction:column; gap:9px; }
.tec-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; width:100%; }
.tec-nom{ font-weight:650; color:var(--tinta); }
.tec-fecha{ font-size:12px; color:var(--gris); white-space:nowrap; }
.tec-horas{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:baseline; gap:6px;
  background:#f3f7fa; border-radius:8px; padding:5px 10px;
  font-size:12.5px; font-weight:650; color:var(--az-hond);
  font-variant-numeric:tabular-nums;
}
.chip .l{
  font-size:9.5px; font-weight:700; color:var(--gris);
  letter-spacing:.07em; text-transform:uppercase;
}
.tec-obs{ margin:0; font-size:12.5px; color:var(--gris); line-height:1.45; }

.galeria{ padding:14px 16px; }

/* Icono dentro de las pastillas de estado */
.pill-ico{ width:11px; height:11px; margin-right:4px; flex:0 0 auto; }
.pill{ gap:0; }

/* Los datos de la ficha se reparten sin dejar celdas vacias: con 3 campos y
   2 columnas, la rejilla dejaba un hueco gris. */
.ficha-meta{ display:flex; flex-wrap:wrap; gap:1px; }
.ficha-meta > div{ flex:1 1 130px; }

/* Imagen que no carga: se ve como un marco discreto en vez de un texto
   desbordado con el icono de rota */
.galeria a{
  display:flex; align-items:center; justify-content:center;
  min-height:130px; background:#f3f7fa;
}
.galeria img{
  font-size:11px; color:var(--gris); text-align:center;
  overflow:hidden; padding:4px;
}

/* ---------- Formularios en tarjeta ---------- */
.form-sec .form-cuerpo{ padding:16px; }
.form-sec textarea{ resize:vertical; min-height:96px; line-height:1.5; }
.campo-nota{
  display:block; margin-top:6px; font-size:11.5px; color:var(--gris);
  font-weight:500; letter-spacing:0; text-transform:none;
}
fieldset.campo{ border:none; margin:0 0 14px; padding:0; }
fieldset.campo > span{
  display:block; font-size:11px; font-weight:700; color:var(--gris);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px;
}
.opciones{ display:flex; flex-wrap:wrap; gap:8px; }
.opcion{ flex:1 1 auto; }
.opcion input{ position:absolute; opacity:0; pointer-events:none; }
.opcion span{
  display:block; text-align:center; cursor:pointer;
  border:1px solid var(--az-borde); border-radius:10px;
  padding:10px 12px; font-size:12.5px; font-weight:650; color:var(--az-osc);
  background:#fbfdfe; transition:background .15s, border-color .15s;
}
.opcion input:checked + span{ background:var(--az); border-color:var(--az); color:#fff; }
.opcion input:focus-visible + span{ outline:2px solid var(--az); outline-offset:2px; }

.previas{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:14px; }
.previas figure{ margin:0; }
.previas img{
  width:74px; height:74px; object-fit:cover; display:block;
  border-radius:11px; border:1px solid var(--linea);
}

/* Boton de accion sobre el listado */
.tabla-acc{ margin-bottom:12px; }


/* =========================================================================
   Mi condominio
   ========================================================================= */
.emp-tipo{
  display:inline-block;
  padding:5px 12px; border-radius:99px;
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.emp-tipo.pro{ background:#d8f0e3; color:#1f5f43; }
.emp-tipo.arr{ background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.3); }

.emp-logo{
  width:50px; height:50px; border-radius:15px; flex:0 0 auto;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:750; letter-spacing:.02em;
}

/* ---------- Accesos de contacto ---------- */
.acc{
  display:flex; align-items:center; gap:10px;
  background:#fff; padding:13px 15px; text-decoration:none; color:inherit;
  min-width:0; transition:background .15s;
}
.acc:hover{ background:var(--az-tenue); }
.acc svg{ width:19px; height:19px; flex:0 0 auto; color:var(--az); }
/* El correo se recorta con puntos suspensivos en vez de partirse a mitad
   de palabra: el enlace sigue llevando la direccion completa. */
.acc > span{
  min-width:0; font-size:13px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.acc .l{
  display:block; font-size:9.5px; font-weight:700; color:var(--gris);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:1px;
}

/* ---------- Oficinas ---------- */
.ofis{ display:flex; flex-wrap:wrap; gap:10px; padding:14px 16px; }
.ofi{
  flex:1 1 150px; background:#fbfdfe;
  border:1px solid var(--az-borde); border-radius:13px; padding:12px 14px;
}
.ofi-num{
  display:block; font-size:16px; font-weight:750; color:var(--az-hond);
  margin-bottom:7px;
}
.ofi-datos{ display:flex; flex-wrap:wrap; gap:5px; }
.etq{
  font-size:11px; font-weight:650; color:var(--az-osc);
  background:var(--az-tenue); border-radius:7px; padding:3px 8px;
}
.etq.area{ background:#e6f3ec; color:var(--ok); font-variant-numeric:tabular-nums; }

/* ---------- Planos ---------- */
.planos{ padding:10px 16px 14px; display:flex; flex-direction:column; gap:9px; }
.plano{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--linea); border-radius:13px; padding:11px 13px;
  text-decoration:none; color:inherit; background:#fbfdfe;
  transition:border-color .15s, background .15s;
}
.plano:hover{ border-color:var(--az-borde); background:var(--az-tenue); }
.plano-ico{
  width:40px; height:40px; border-radius:12px; flex:0 0 auto;
  background:#fdeceb; color:var(--rojo);
  display:flex; align-items:center; justify-content:center;
}
.plano-ico svg{ width:20px; height:20px; }
.plano-txt{ flex:1 1 auto; min-width:0; }
.plano-txt .nom{ display:block; font-size:13.5px; font-weight:650; overflow-wrap:anywhere; }
.plano-txt .sub{ display:block; font-size:11.5px; color:var(--gris); margin-top:2px; }
.plano-baja{
  width:32px; height:32px; border-radius:9px; flex:0 0 auto;
  background:var(--az); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.plano-baja svg{ width:15px; height:15px; }

/* ---------- Personas ---------- */
.persona{
  display:flex; align-items:center; gap:11px;
  padding:11px 16px; border-bottom:1px solid var(--linea);
}
.persona:last-child{ border-bottom:none; }
.avatar{
  width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  background:var(--az-tenue); color:var(--az-osc);
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:750;
}
.avatar.pro{ background:#e6f3ec; color:var(--ok); }
.persona-txt{ flex:1 1 auto; min-width:0; }
.persona-txt .nom{ display:block; font-size:13.5px; font-weight:650; overflow-wrap:anywhere; }
.persona-txt .sub{
  display:block; font-size:11.5px; color:var(--gris); margin-top:2px;
  font-variant-numeric:tabular-nums;
}
.ico-btn{
  width:34px; height:34px; border-radius:10px; flex:0 0 auto;
  border:1px solid var(--az-borde); background:#fff; color:var(--az-osc);
  display:flex; align-items:center; justify-content:center;
}
.ico-btn:hover{ background:var(--az-tenue); }
.ico-btn svg{ width:16px; height:16px; }

/* ---------- Lista de empresas ---------- */
.oculto{ display:none !important; }

.emp-busca{ margin-bottom:12px; }

/* Un bloque por fila: el nombre completo cabe sin recortarse y el saldo
   queda alineado a la derecha, facil de comparar de arriba abajo. */
.emp-lista{
  display:flex; flex-direction:column; gap:9px; margin-bottom:18px;
}

.emp-fila{
  display:flex; align-items:center; gap:12px; min-width:0;
  background:#fff; border:1px solid var(--linea); border-radius:14px;
  box-shadow:var(--sombra); padding:12px 14px;
  text-decoration:none; color:inherit;
  transition:transform .12s ease, box-shadow .12s ease;
}
.emp-fila:active{ transform:scale(.99); }
.emp-fila:hover{ box-shadow:var(--sombra-alta); }

/* El avatar de la lista es mas chico que el de la ficha */
.emp-fila .emp-logo{
  width:42px; height:42px; border-radius:13px; font-size:14px;
  background:var(--az-tenue); border:1px solid var(--az-borde); color:var(--az-osc);
}

.emp-fila-txt{ flex:1 1 auto; min-width:0; }
.emp-fila-txt .nom{
  display:block; font-size:14px; font-weight:700; line-height:1.3;
  overflow-wrap:anywhere;
}
.emp-fila-txt .ruc{
  display:block; margin-top:1px; font-size:11.5px; color:var(--gris);
  font-variant-numeric:tabular-nums;
}

.emp-fila-pie{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:7px;
  font-size:11px; color:var(--gris); font-variant-numeric:tabular-nums;
}
.emp-fila-pie > span{ display:inline-flex; align-items:center; gap:4px; }
.emp-fila-pie svg{ width:13px; height:13px; opacity:.75; }
.emp-fila-pie .emp-tipo{
  padding:2px 8px; font-size:9.5px; letter-spacing:.04em; white-space:nowrap;
  background:var(--az-tenue); color:var(--az-osc); border:none;
}

.emp-fila-der{
  flex:0 0 auto; display:flex; align-items:center; gap:8px; text-align:right;
}
.emp-fila-ir{ width:16px; height:16px; color:var(--az); flex:0 0 auto; }

.emp-tarj-saldo{
  font-size:15px; font-weight:750; color:var(--gris);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.emp-tarj-saldo.debe{ color:var(--rojo); }
/* "Al dia" es un estado, no una cifra: va discreto para que solo salten a la
   vista las empresas que si deben */
.emp-tarj-saldo.saldo-ok:not(.debe){ color:var(--ok); font-size:12.5px; font-weight:650; }

/* =========================================================================
   Ficha de empresa
   Una sola empresa por pantalla: hay sitio para una portada grande, una cinta
   de cifras y, en tableta o escritorio, dos columnas.
   ========================================================================= */

/* ---------- Portada ---------- */
.fi-hero{
  background:linear-gradient(115deg, var(--az-hond), var(--az));
  color:#fff; border-radius:18px; padding:20px 18px 0;
  box-shadow:var(--sombra); margin-bottom:14px; overflow:hidden;
}
.fi-hero-fila{ display:flex; align-items:flex-start; gap:14px; }
.fi-logo{
  width:56px; height:56px; border-radius:17px; flex:0 0 auto;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
  font-size:19px; font-weight:750; letter-spacing:.02em;
}
.fi-id{ min-width:0; }
.fi-id h1{
  margin:0; font-size:20px; font-weight:750; color:#fff;
  line-height:1.25; overflow-wrap:anywhere;
}
.fi-ruc{
  margin:4px 0 10px; font-size:12.5px; color:#c2d6e4;
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}

/* Cinta de cifras: se reparten a partes iguales y se separan con una linea */
.fi-cifras{
  display:flex; margin-top:18px;
  border-top:1px solid rgba(255,255,255,.16);
}
.fi-cifras > div{
  flex:1 1 0; min-width:0; padding:11px 6px 13px; text-align:center;
  border-left:1px solid rgba(255,255,255,.14);
}
.fi-cifras > div:first-child{ border-left:none; }
.fi-cifras strong{
  display:block; font-size:17px; font-weight:750; line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.fi-cifras span{
  display:block; margin-top:2px; font-size:10px; color:#c2d6e4;
  letter-spacing:.04em; text-transform:uppercase;
}

/* ---------- Saldo y contacto ---------- */
/* En pantalla ancha van lado a lado; en telefono, uno debajo del otro */
.fi-cols{ display:grid; gap:12px; margin-bottom:12px; }
@media (min-width:720px){
  .fi-cols{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:start; }
}

.fi-saldo{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#fff; border:1px solid var(--linea); border-radius:16px;
  box-shadow:var(--sombra); padding:15px 16px;
  text-decoration:none; color:inherit;
}
.fi-saldo:hover{ box-shadow:var(--sombra-alta); }
.fi-saldo-txt{ min-width:0; }
.fi-saldo .l{
  display:block; font-size:10.5px; font-weight:700; color:var(--gris);
  letter-spacing:.06em; text-transform:uppercase;
}
.fi-saldo .v{
  display:block; font-size:26px; font-weight:750; color:var(--rojo);
  font-variant-numeric:tabular-nums; margin-top:3px; min-height:33px;
  line-height:1.2;
}
.fi-saldo .v.cero{ color:var(--ok); }
.fi-saldo .p{ display:block; font-size:11.5px; color:var(--gris); min-height:17px; }
.fi-saldo-ir{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  background:var(--az-tenue); color:var(--az-osc);
  display:flex; align-items:center; justify-content:center;
}
.fi-saldo-ir svg{ width:15px; height:15px; }

.fi-acc{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  gap:1px; background:var(--linea);
  border:1px solid var(--linea); border-radius:16px; overflow:hidden;
  box-shadow:var(--sombra);
}

/* ---------- Propietario ---------- */
.fi-prop{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--linea); border-radius:16px;
  box-shadow:var(--sombra); padding:13px 16px; margin-bottom:12px;
}
.fi-prop .et{
  display:block; font-size:9.5px; font-weight:700; color:var(--gris);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:1px;
}

/* ---------- Acordeones ---------- */
/* <details> nativo: abre y cierra sin JS y el teclado ya lo maneja */
.acordeones{
  background:#fff; border:1px solid var(--linea); border-radius:16px;
  box-shadow:var(--sombra); overflow:hidden;
}
.ac{ border-bottom:1px solid var(--linea); }
.ac:last-child{ border-bottom:none; }

.ac > summary{
  display:flex; align-items:center; gap:9px;
  padding:14px 16px; cursor:pointer; list-style:none;
  font-size:13.5px; font-weight:700; user-select:none;
}
/* El triangulo por omision se sustituye por el chevron de la derecha */
.ac > summary::-webkit-details-marker{ display:none; }
.ac > summary::marker{ content:''; }
.ac > summary:hover{ background:#fbfdfe; }
.ac > summary > svg:first-of-type{ width:18px; height:18px; color:var(--az); flex:0 0 auto; }
.ac-t{ flex:1 1 auto; min-width:0; }
.ac-n{
  flex:0 0 auto; background:var(--az-tenue); color:var(--az-osc);
  font-size:11px; font-weight:700; padding:2px 9px; border-radius:99px;
  font-variant-numeric:tabular-nums;
}
.ac-v{
  width:17px; height:17px; flex:0 0 auto; color:var(--gris);
  transition:transform .18s ease;
  /* En SVG el origen del giro es la esquina del viewBox, no el centro: sin
     esto el chevron se desplaza al rotar en algunos navegadores. */
  transform-box:fill-box; transform-origin:center;
}
.ac[open] > summary{ background:#fbfdfe; border-bottom:1px solid var(--linea); }
.ac[open] > summary .ac-v{ transform:rotate(180deg); }
.ac[open] > summary > svg:first-of-type{ color:var(--az-osc); }

.ac-nota{
  margin:0; padding:10px 16px; background:#fbfdfe;
  border-top:1px solid var(--linea);
  font-size:11.5px; color:var(--gris);
}

/* ---------- Bodegas y parqueos ---------- */
.espacios{ display:flex; flex-direction:column; }
.espacio{
  display:flex; align-items:center; gap:11px;
  padding:11px 16px; border-bottom:1px solid var(--linea);
}
.espacio:last-child{ border-bottom:none; }
.espacio-cod{
  flex:0 0 auto; min-width:52px; text-align:center;
  padding:7px 10px; border-radius:10px;
  background:var(--az-tenue); border:1px solid var(--az-borde); color:var(--az-hond);
  font-size:13px; font-weight:750; font-variant-numeric:tabular-nums;
}
.espacio-txt{ flex:1 1 auto; min-width:0; }
.espacio-txt .nom{ display:block; font-size:13px; font-weight:650; overflow-wrap:anywhere; }
.espacio-txt .sub{ display:block; font-size:11.5px; color:var(--gris); }

/* ---------- Clave catastral ---------- */
/* Es un dato de registro, no de uso diario: se etiqueta para que se entienda
   que ese numero largo no es el codigo del espacio. */
.catastro{
  display:block; margin-top:5px;
  font-size:12px; font-weight:650; color:var(--az-hond);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.catastro .l{
  display:block; font-size:9px; font-weight:700; color:var(--gris);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:1px;
}

.fi-pie{
  margin:14px 0 0; text-align:center;
  font-size:11.5px; color:var(--gris);
}

/* ---------- Tags de acceso ---------- */
.tags{ display:flex; flex-direction:column; }
.tag{
  display:flex; align-items:center; gap:11px;
  padding:11px 16px; border-bottom:1px solid var(--linea);
}
.tag:last-child{ border-bottom:none; }
/* Los dados de baja quedan atenuados pero legibles, no ocultos */
.tag.baja{ background:#fbfcfd; }
.tag.baja .tag-cod{ background:var(--linea); color:var(--gris); border-color:var(--linea); }
.tag.baja .tag-txt .nom{ color:var(--gris); }

.tag-cod{
  flex:0 0 auto; padding:6px 9px; border-radius:9px;
  background:var(--az-tenue); border:1px solid var(--az-borde); color:var(--az-hond);
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;
  letter-spacing:.02em; white-space:nowrap;
}
.tag-txt{ flex:1 1 auto; min-width:0; }
.tag-txt .nom{ display:block; font-size:13.5px; font-weight:650; overflow-wrap:anywhere; }
.tag-txt .sub{
  display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:4px;
}
.tag-txt .doc{ font-size:11px; color:var(--gris); font-variant-numeric:tabular-nums; }

.tag-baja-form{ flex:0 0 auto; }
.tag-baja, .btn-baja{
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 11px; border-radius:10px; cursor:pointer;
  border:1px solid #e8cfcd; background:var(--rojo-tenue); color:var(--rojo);
  font-family:inherit; font-size:11.5px; font-weight:650; white-space:nowrap;
}
.tag-baja:hover, .btn-baja:hover{ background:#f2dcda; }
.tag-baja:disabled, .btn-baja:disabled{ opacity:.55; cursor:default; }
.tag-baja svg, .btn-baja svg{ width:14px; height:14px; }

/* ---------- Archivos elegidos antes de enviar ---------- */
.lista-arch{ display:flex; flex-direction:column; gap:6px; }
.lista-arch:empty{ display:none; }
.arch-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:10px;
  background:var(--az-tenue); border:1px solid var(--az-borde);
  font-size:12.5px;
}
.arch-item .nom{
  flex:1 1 auto; min-width:0; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.arch-item .tam{
  flex:0 0 auto; color:var(--gris); font-size:11.5px;
  font-variant-numeric:tabular-nums;
}
.campo-nota.mal{ color:var(--rojo); font-weight:650; }

/* Columna de accion de la tabla (la baja de tags) */
.celda-acc{ width:1%; white-space:nowrap; text-align:right; }
@media (max-width:760px){
  /* En tarjeta ocupa el ancho, igual que el boton Ver */
  table.tabla tbody td.celda-acc{ display:block; padding:0 13px 12px; text-align:left; }
  table.tabla tbody td.celda-acc::before{ content:none; }
  .celda-acc .btn-baja{ width:100%; justify-content:center; padding:10px; }
}

/* =========================================================================
   Reservas de salones
   ========================================================================= */

/* Hueco al final para que la barra fija no tape el ultimo campo */
.res-cont{ padding-bottom:96px; }

.res-salon{ padding:0 16px 4px; }

/* ---------- Navegacion de semana ---------- */
.res-sem{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 16px; border-bottom:1px solid var(--linea);
}
.res-sem-txt{ font-size:13px; font-weight:700; color:var(--az-hond); }
.res-nav{
  width:36px; height:36px; flex:0 0 auto; border-radius:11px; cursor:pointer;
  border:1px solid var(--az-borde); background:#fff; color:var(--az-osc);
  display:flex; align-items:center; justify-content:center;
}
.res-nav:hover:not(:disabled){ background:var(--az-tenue); }
.res-nav:disabled{ opacity:.35; cursor:default; }
.res-nav svg{ width:17px; height:17px; }

/* ---------- Tira de dias (movil) ---------- */
/* Se desplaza en horizontal en vez de encogerse: con 7 dias en 360px las
   columnas quedarian de 45px y no se podria tocar bien. */
.res-dias{
  display:flex; gap:7px; padding:12px 16px; overflow-x:auto;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.res-dias::-webkit-scrollbar{ height:0; }
.res-dia{
  position:relative; flex:0 0 auto; scroll-snap-align:center;
  min-width:58px; padding:8px 6px; cursor:pointer;
  border:1px solid var(--linea); border-radius:13px; background:#fff;
  font-family:inherit; color:var(--tinta); text-align:center; line-height:1.15;
}
.res-dia .d{
  display:block; font-size:9.5px; font-weight:700; color:var(--gris);
  letter-spacing:.06em; text-transform:uppercase;
}
.res-dia .n{ display:block; font-size:18px; font-weight:750; margin-top:2px; }
.res-dia .m{ display:block; font-size:9.5px; color:var(--gris); text-transform:uppercase; }
.res-dia.hoy{ border-color:var(--az); }
.res-dia.activo{
  background:var(--az-hond); border-color:var(--az-hond); color:#fff;
  box-shadow:var(--sombra);
}
.res-dia.activo .d, .res-dia.activo .m{ color:#c2d6e4; }
/* Sin turnos libres: se ve, pero apagado */
.res-dia.sin:not(.activo){ opacity:.5; }
/* Cuantos turnos llevas elegidos ese dia */
.res-dia .pin{
  position:absolute; top:-6px; right:-5px;
  min-width:19px; height:19px; padding:0 5px; border-radius:99px;
  border:2px solid var(--fondo); background:var(--ok); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:750;
}

/* ---------- Turnos del dia (movil) ---------- */
.res-dia-tit{
  padding:4px 16px 10px; font-size:11px; font-weight:700; color:var(--gris);
  letter-spacing:.06em; text-transform:uppercase;
}
.res-turnos{ display:flex; flex-direction:column; gap:8px; padding:0 16px 14px; }

.res-turno{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:13px 14px; border-radius:13px; text-align:left;
  border:1px solid var(--linea); background:#fff;
  font-family:inherit; color:inherit;
}
button.res-turno{ cursor:pointer; }
.res-turno .h{
  flex:0 0 auto; font-size:14px; font-weight:750; color:var(--az-hond);
  font-variant-numeric:tabular-nums;
}
.res-turno .s{
  flex:1 1 auto; min-width:0; font-size:11.5px; color:var(--gris);
  text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.res-turno .v{ flex:0 0 auto; width:20px; height:20px; display:flex; }
.res-turno .v svg{ width:20px; height:20px; }

.res-turno.e-libre{ border-color:var(--az-borde); }
.res-turno.e-libre:hover{ background:var(--az-tenue); }
.res-turno.e-elegido{
  background:#e6f5ee; border-color:var(--ok); color:var(--ok);
  box-shadow:inset 0 0 0 1px var(--ok);
}
.res-turno.e-elegido .h{ color:var(--ok); }
.res-turno.e-elegido .s{ color:#2f7d5b; }
/* Ocupado y bloqueado se distinguen: uno lo tomo alguien, el otro lo cerro
   administracion. Fuera de plazo es solo por la antelacion minima. */
.res-turno.e-ocupado{ background:#fbfcfd; border-color:var(--linea); }
.res-turno.e-ocupado .h{ color:var(--gris); }
.res-turno.e-bloqueado{ background:var(--rojo-tenue); border-color:#e8cfcd; }
.res-turno.e-bloqueado .h, .res-turno.e-bloqueado .s{ color:var(--rojo); }
.res-turno.e-tarde{ background:#fbfcfd; border-style:dashed; }
.res-turno.e-tarde .h{ color:#b9c3cc; }

.res-nota{ margin:0; padding:0 16px 14px; font-size:11.5px; color:var(--gris); }
.res-nota.mal{ color:var(--rojo); font-weight:650; }

/* ---------- Semana completa (pantalla ancha) ---------- */
.res-tabla{ padding:0 16px 14px; overflow-x:auto; }
.res-t{ width:100%; border-collapse:separate; border-spacing:0; }
.res-t th, .res-t td{
  border-bottom:1px solid var(--linea); border-right:1px solid var(--linea);
  padding:9px 6px; text-align:center; font-size:12px;
}
.res-t thead th{
  background:#fbfdfe; font-size:11px; font-weight:700; color:var(--az-hond);
  text-transform:capitalize; white-space:nowrap;
}
.res-t thead th.hoy{ color:var(--az); }
.res-t thead th small{
  display:block; margin-top:2px; font-size:10px; font-weight:500; color:var(--gris);
}
.res-t tbody th{
  background:#fbfdfe; font-size:11px; font-weight:650; color:var(--gris);
  white-space:nowrap; font-variant-numeric:tabular-nums; text-align:left;
}
.res-t td.e-libre{ cursor:pointer; color:var(--az-borde); font-weight:700; }
.res-t td.e-libre:hover{ background:var(--az-tenue); color:var(--ok); }
.res-t td.e-elegido{
  background:var(--ok); color:#fff; font-weight:750; cursor:pointer;
  box-shadow:inset 0 0 0 2px #26694c;
}
.res-t td.e-ocupado, .res-t td.e-bloqueado{
  background:#f2f5f8; color:var(--gris); font-size:10px; line-height:1.2;
  max-width:110px; overflow:hidden; text-overflow:ellipsis;
}
.res-t td.e-bloqueado{ background:var(--rojo-tenue); color:var(--rojo); }
.res-t td.e-tarde{
  color:#cfd8df;
  background:repeating-linear-gradient(45deg,#fbfcfd,#fbfcfd 4px,#fff 4px,#fff 8px);
}

/* ---------- Barra de resumen ---------- */
/* Fija abajo: mientras se eligen turnos siempre se ve cuantos van y cuanto
   cuesta, sin tener que subir. */
.res-barra{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:flex; align-items:center; gap:12px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:#fff; border-top:1px solid var(--linea);
  box-shadow:0 -4px 14px rgba(47,59,69,.08);
}
.res-barra-txt{ flex:1 1 auto; min-width:0; }
.res-barra-txt strong{ display:block; font-size:13.5px; color:var(--az-hond); }
.res-barra-txt span{
  display:block; font-size:17px; font-weight:750; color:var(--gris);
  font-variant-numeric:tabular-nums;
}
.res-barra.activa .res-barra-txt span{ color:var(--ok); }
.res-barra .btn{ flex:0 0 auto; }

/* ---------- Mis reservas ---------- */
.res-lista{ display:flex; flex-direction:column; gap:10px; }
.res-item{
  background:#fff; border:1px solid var(--linea); border-radius:14px;
  box-shadow:var(--sombra); padding:13px 14px;
}
.res-item-hd{ display:flex; align-items:flex-start; gap:10px; }
.res-item-tit{
  flex:1 1 auto; min-width:0; font-size:14px; font-weight:700;
  color:var(--az-hond); overflow-wrap:anywhere;
}
.res-item-datos{ display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.res-item-pie{
  display:flex; align-items:center; gap:10px; margin-top:9px;
  padding-top:9px; border-top:1px solid var(--linea);
  font-size:11.5px; color:var(--gris);
}
.res-item-pie span:first-child{ flex:1 1 auto; min-width:0; }
.res-item-total{
  flex:0 0 auto; font-size:14px; font-weight:750; color:var(--az-hond);
  font-variant-numeric:tabular-nums;
}
.anexo-arch.t-otro .anexo-ext{ background:var(--gris); }

/* =========================================================================
   Visor de imágenes
   ========================================================================= */
/* Fondo oscuro y a pantalla completa: en una foto de obra lo que importa es
   el detalle, y cualquier marco alrededor resta sitio. */
.visor{
  position:fixed; inset:0; z-index:100; display:none;
  background:rgba(10,16,22,.94);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.visor.abierto{ display:grid; grid-template-rows:1fr auto auto; }
/* Con el visor abierto el fondo no se desplaza */
body.sin-scroll{ overflow:hidden; }

.visor-lienzo{
  display:flex; align-items:center; justify-content:center;
  min-height:0; padding:16px;
}
.visor-lienzo img{
  max-width:100%; max-height:100%;
  object-fit:contain; border-radius:6px;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}

.visor-x, .visor-nav{
  position:absolute; z-index:2; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:none; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.visor-x:hover, .visor-nav:hover{ background:rgba(255,255,255,.22); }
.visor-x{
  top:calc(12px + env(safe-area-inset-top)); right:12px;
  width:42px; height:42px;
}
.visor-x svg{ width:20px; height:20px; }
/* Las flechas van a media altura de la foto, no del visor entero */
.visor-nav{ top:38%; width:44px; height:44px; }
.visor-nav.ant{ left:10px; }
.visor-nav.sig{ right:10px; }
.visor-nav svg{ width:22px; height:22px; }
.visor-nav[hidden]{ display:none; }

.visor-pie{
  display:flex; align-items:center; gap:12px;
  padding:10px 18px; color:#e6edf3;
}
.visor-txt{
  flex:1 1 auto; min-width:0; font-size:13px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.visor-n{
  flex:0 0 auto; font-size:12px; font-weight:700; color:#9fb2c2;
  font-variant-numeric:tabular-nums;
}

/* Tira de miniaturas: se ve de un vistazo cuántas hay y dónde estás */
.visor-tiras{
  display:flex; gap:7px; overflow-x:auto;
  padding:0 14px calc(14px + env(safe-area-inset-bottom));
  scrollbar-width:none;
}
.visor-tiras::-webkit-scrollbar{ height:0; }
.visor-tiras[hidden]{ display:none; }
.visor-tira{
  flex:0 0 auto; width:52px; height:52px; padding:0; cursor:pointer;
  border:2px solid transparent; border-radius:9px; overflow:hidden;
  background:none; opacity:.5; transition:opacity .15s, border-color .15s;
}
.visor-tira img{ width:100%; height:100%; object-fit:cover; display:block; }
.visor-tira.activa{ opacity:1; border-color:#fff; }
.visor-tira:hover{ opacity:.85; }

@media (min-width:720px){
  .visor-nav{ width:52px; height:52px; }
  .visor-nav.ant{ left:20px; }
  .visor-nav.sig{ right:20px; }
  .visor-tira{ width:62px; height:62px; }
}
@media (prefers-reduced-motion:reduce){
  .visor-tira{ transition:none; }
}

/* =========================================================================
   Contactos del edificio
   ========================================================================= */

/* Enlace suelto del inicio: se necesita de vez en cuando, así que no ocupa un
   hueco de la cuadrícula, pero queda a la vista sin buscarlo. */
.enlace-suelto{
  display:flex; align-items:center; gap:9px;
  padding:12px 14px; margin-bottom:22px;
  border:1px solid var(--linea); border-radius:13px; background:#fff;
  color:var(--az-osc); text-decoration:none;
  font-size:13px; font-weight:650;
}
.enlace-suelto:hover{ background:var(--az-tenue); border-color:var(--az-borde); }
.enlace-suelto svg{ width:17px; height:17px; flex:0 0 auto; color:var(--az); }
.enlace-suelto .fl{ margin-left:auto; width:15px; height:15px; color:var(--gris); }

/* ---------- Dónde estamos ---------- */
.ct-lugar{
  background:#fff; border:1px solid var(--linea); border-radius:16px;
  box-shadow:var(--sombra); padding:20px 18px; margin-bottom:20px;
  text-align:center;
}
.ct-lugar-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:16px; margin-bottom:12px;
  background:var(--az-tenue); color:var(--az);
}
.ct-lugar-ico svg{ width:26px; height:26px; }
.ct-lugar h2{ margin:0; font-size:16px; font-weight:750; color:var(--az-hond); }
.ct-lugar p{ margin:6px 0 14px; font-size:13px; color:var(--gris); line-height:1.5; }
.ct-mapa{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:99px;
  background:var(--az-tenue); color:var(--az-osc);
  font-size:12.5px; font-weight:650; text-decoration:none;
}
.ct-mapa:hover{ background:var(--az-borde); }
.ct-mapa svg{ width:15px; height:15px; }

.ct-tit{ margin-left:2px; }

/* ---------- Tarjeta de cada contacto ---------- */
.ct-lista{ display:flex; flex-direction:column; gap:12px; }
.ct-item{
  background:#fff; border:1px solid var(--linea); border-radius:16px;
  box-shadow:var(--sombra); padding:15px 16px;
}
/* La garita atiende a cualquier hora: se distingue del resto */
.ct-item.urgente{ border-left:3px solid var(--rojo); }

.ct-hd{ display:flex; align-items:center; gap:9px; }
.ct-rol{
  flex:1 1 auto; min-width:0; font-size:14.5px; font-weight:700;
  color:var(--az-hond);
}
.ct-horario{
  display:flex; align-items:center; gap:6px; margin-top:5px;
  font-size:11.5px; color:var(--gris);
}
.ct-horario svg{ width:13px; height:13px; flex:0 0 auto; }

/* El número, grande y tocable: en el móvil es lo primero que se busca */
.ct-num{
  display:block; margin:10px 0 12px;
  font-size:21px; font-weight:700; letter-spacing:.02em;
  color:var(--az-hond); text-decoration:none;
  font-variant-numeric:tabular-nums;
}
.ct-num:hover{ color:var(--az); }

/* Los botones NO van rellenos de color ni a todo lo ancho.
   Dos bloques saturados por tarjeta, cinco tarjetas, era una pared de verde
   y azul que tapaba lo que importa: el número. Van teñidos y del tamaño de
   su texto, que se reconocen igual y dejan respirar la tarjeta. */
.ct-acc{ display:flex; flex-wrap:wrap; gap:8px; }
.ct-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px; border-radius:10px;
  border:1px solid transparent; text-decoration:none;
  font-size:13px; font-weight:650;
  transition:background .15s, border-color .15s;
}
.ct-btn:active{ transform:translateY(1px); }
.ct-btn svg{ width:16px; height:16px; flex:0 0 auto; }
/* Se conserva el verde de WhatsApp porque es lo que lo hace reconocible
   de un vistazo, pero como tinte y no como fondo macizo. */
.ct-btn.wa{ background:#e7f8ee; border-color:#c3ecd4; color:#127a44; }
.ct-btn.wa:hover{ background:#d6f2e3; border-color:#9fdfbc; }
.ct-btn.tel{ background:var(--az-tenue); border-color:var(--az-borde); color:var(--az-osc); }
.ct-btn.tel:hover{ background:#e2ecf4; border-color:var(--az); }

@media (prefers-reduced-motion:reduce){
  .ct-btn{ transition:none; }
}