:root{
  --navy:#0f172b; --navy-2:#1d293d; --azul:#155dfc; --azul-claro:#50a2ff;
  --gris:#45556c; --gris-2:#62748e; --linea:#e2e8f0; --fondo:#f8fafc; --blanco:#fff;
  --ambar:#b45309; --ambar-bg:#fffbeb; --rojo:#be123c; --rojo-bg:#fff1f2; --verde-bg:#eef4ff;
  --sombra:0 1px 2px rgba(15,23,43,.06), 0 8px 24px rgba(15,23,43,.06);
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--navy-2);font:15px/1.55 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.contenido{max-width:1760px;margin:0 auto;padding:0 24px}

.barra{background:var(--blanco);border-bottom:1px solid #e1e7ef;padding:16px 0;position:sticky;top:0;z-index:5}
.barra-interna{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.marca{display:flex;align-items:center;text-decoration:none}
.marca img{height:42px;width:auto;display:block}
.derecha{display:flex;align-items:center;gap:14px}
.actualizado{font-size:12px;color:var(--gris-2)}
.pastilla{background:var(--navy);color:#fff;border-radius:99px;padding:8px 18px;font-size:12px;font-weight:500;white-space:nowrap}

.salir{font-size:12px;color:var(--gris-2);text-decoration:none;border:1px solid var(--linea);border-radius:99px;padding:7px 14px;transition:.15s}
.salir:hover{border-color:var(--azul);color:var(--azul)}

.titulo{background:var(--blanco);border-bottom:1px solid var(--linea);padding:26px 0 24px}
.titulo h1{margin:0;font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--navy)}
.titulo p{margin:6px 0 0;color:var(--gris);font-size:14px}
.titulo strong{color:var(--azul);font-weight:600}

.aviso{margin:22px 0 0;padding:14px 16px;background:var(--ambar-bg);border:1px solid #fde68a;border-left:4px solid #f59e0b;border-radius:10px;color:#92400e;font-size:14px}
.aviso.oculto{display:none}

.tarjetas{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:22px 0}
#vista-mails .tarjetas{grid-template-columns:repeat(6,1fr)}
.nota-mails{margin-top:6px;font-size:13px;color:var(--gris-2)}
.tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:14px;padding:16px 18px;box-shadow:var(--sombra);display:flex;flex-direction:column}
.tarjeta.destacada{border-color:#bfdbfe;background:linear-gradient(180deg,#f5f9ff,#fff)}
.etiqueta{display:block;font-size:12px;color:var(--gris-2);font-weight:500}
.numero{display:block;font-size:34px;font-weight:700;letter-spacing:-.02em;color:var(--navy);line-height:1.15;margin:4px 0 2px}
.tarjeta.destacada .numero{color:var(--azul)}
.pie{display:block;font-size:12px;color:#90a1b9;line-height:1.35}
.hoy{align-self:flex-start;margin-top:auto;padding-top:10px;font-size:11px;font-weight:500;color:var(--gris-2)}
.hoy b{font-weight:700;color:var(--navy)}
.tarjeta.destacada .hoy b{color:var(--azul)}

.acumulado{background:var(--blanco);border:1px solid var(--linea);border-radius:14px;padding:18px;box-shadow:var(--sombra)}
.acumulado p{margin:12px 0 0;color:var(--gris);font-size:14px}
.acumulado strong{color:var(--navy)}
.barra-progreso{height:10px;background:#eef2f7;border-radius:99px;overflow:hidden}
.barra-progreso>div{height:100%;background:linear-gradient(90deg,var(--azul),var(--azul-claro));border-radius:99px;transition:width .6s ease}

.tabla-caja{background:var(--blanco);border:1px solid var(--linea);border-radius:14px;margin:22px 0;box-shadow:var(--sombra);overflow:hidden}
.filtros{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:16px 18px;border-bottom:1px solid var(--linea)}
#buscador,#buscador-c{flex:1 1 280px;min-width:220px;padding:10px 14px;border:1px solid var(--linea);border-radius:10px;font:inherit;font-size:14px;background:var(--fondo)}
#buscador:focus,#buscador-c:focus{outline:2px solid var(--azul-claro);outline-offset:1px;background:#fff}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--linea);background:var(--blanco);color:var(--gris);padding:7px 13px;border-radius:99px;font-size:13px;cursor:pointer;font-family:inherit}
.chip:hover{border-color:var(--azul-claro);color:var(--azul)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}

.tabla-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{background:var(--navy);color:#fff;text-align:left;padding:12px 14px;font-weight:600;font-size:12px;white-space:nowrap;position:sticky;top:0}
td{padding:12px 14px;border-bottom:1px solid var(--linea);vertical-align:top}
tbody tr:nth-child(even){background:var(--fondo)}
tbody tr:hover{background:#f1f6ff}
.asunto{max-width:340px}
.marca-accion{display:inline-block;padding:4px 10px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap}
.a-ok{background:var(--verde-bg);color:var(--azul)}
.a-pendiente{background:var(--ambar-bg);color:var(--ambar)}
.a-reclamo{background:var(--rojo-bg);color:var(--rojo)}
.a-otro{background:#f1f5f9;color:var(--gris-2)}
.vacio{text-align:center;color:var(--gris-2);padding:40px}
.nota{margin:0;padding:12px 18px;font-size:12px;color:var(--gris-2);border-top:1px solid var(--linea);background:var(--fondo)}

.pie-pagina{margin:26px 0 40px;color:var(--gris);font-size:14px}
.pie-pagina .chico{font-size:12px;color:#90a1b9;margin-top:6px}

@media (max-width:1200px){ .tarjetas, #vista-mails .tarjetas{grid-template-columns:repeat(3,1fr)} }
@media (max-width:900px){ .tarjetas, #vista-mails .tarjetas{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .tarjetas, #vista-mails .tarjetas{grid-template-columns:1fr} .numero{font-size:30px} .asunto{max-width:200px} }

.casilla{display:inline-block;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600}
.c-pagos{background:var(--verde-bg);color:var(--azul)}
.c-info{background:#f5f3ff;color:#6d28d9}
.fecha{white-space:nowrap;color:var(--gris-2);font-size:12.5px}
.explicacion{max-width:460px;color:var(--gris);line-height:1.5}
.punto{display:inline-block;width:8px;height:8px;border-radius:99px;margin-right:8px;vertical-align:middle;background:#cbd5e1}
.punto.a-ok{background:var(--azul)}
.punto.a-pendiente{background:#f59e0b}
.punto.a-reclamo{background:var(--rojo)}
@media (max-width:560px){ .explicacion{max-width:260px} }

/* pantalla de ingreso */
.cuerpo-ingreso{background:linear-gradient(180deg,#eef3fb,#f8fafc 55%);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.ingreso{width:100%;max-width:400px;text-align:center}
.caja-ingreso{background:var(--blanco);border:1px solid var(--linea);border-radius:18px;padding:36px 30px 28px;box-shadow:0 1px 2px rgba(15,23,43,.05),0 20px 50px rgba(15,23,43,.10)}
.logo-ingreso{height:40px;width:auto;margin-bottom:22px}
.caja-ingreso h1{margin:0;font-size:21px;font-weight:700;letter-spacing:-.01em;color:var(--navy)}
.caja-ingreso .sub{margin:4px 0 26px;font-size:13px;color:var(--gris-2)}
.caja-ingreso label{display:block;text-align:left;font-size:12px;font-weight:600;color:var(--gris);margin-bottom:6px}
.caja-ingreso input{width:100%;padding:12px 14px;border:1px solid var(--linea);border-radius:10px;font:inherit;font-size:15px;background:var(--fondo);letter-spacing:.04em}
.caja-ingreso input:focus{outline:2px solid var(--azul-claro);outline-offset:1px;background:#fff}
.caja-ingreso button{width:100%;margin-top:16px;padding:12px;border:0;border-radius:99px;background:var(--navy);color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.caja-ingreso button:hover{background:var(--azul)}
.caja-ingreso button:disabled{opacity:.6;cursor:default}
.error{margin:14px 0 0;color:var(--rojo);font-size:13px;background:var(--rojo-bg);border-radius:8px;padding:9px 12px}
.ayuda{margin:20px 0 0;font-size:12px;color:#90a1b9}
.firma{margin:20px 0 0;font-size:12px;color:#90a1b9}
.firma a{color:var(--azul);text-decoration:none;font-weight:500}

.tipo{display:inline-block;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600;white-space:nowrap}
.t-pago{background:#e0f2fe;color:#075985}
.t-reclamo{background:#fef3c7;color:#92400e}
.t-gris{background:#f1f5f9;color:#64748b}
.t-error{background:#fee2e2;color:#991b1b}

/* --- comentarios del cliente sobre un mail --- */
.col-obs{white-space:normal;min-width:130px}
.obs-previa{display:block;font-size:12px;color:var(--gris);background:#f8fafc;border-left:3px solid var(--azul);border-radius:0 6px 6px 0;padding:6px 8px;margin-bottom:6px}
.obs-abrir{background:none;border:1px solid var(--linea);color:var(--gris-2);border-radius:99px;padding:5px 12px;font-size:12px;font-family:inherit;cursor:pointer;transition:.15s}
.obs-abrir:hover{border-color:var(--azul);color:var(--azul)}

.fila-form.oculta{display:none}
.fila-form>td{background:#f8fafc;padding:16px 18px}
.obs-form{max-width:720px}
.obs-titulo{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--navy)}
.obs-motivos{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.obs-chip input{position:absolute;opacity:0;pointer-events:none}
.obs-chip span{display:inline-block;border:1px solid var(--linea);background:var(--blanco);border-radius:99px;padding:6px 13px;font-size:12px;color:var(--gris);cursor:pointer;transition:.15s}
.obs-chip input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.obs-chip input:focus-visible+span{outline:2px solid var(--azul);outline-offset:2px}
.obs-texto{width:100%;box-sizing:border-box;border:1px solid var(--linea);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:13px;color:var(--gris);resize:vertical}
.obs-texto:focus{outline:none;border-color:var(--azul)}
.obs-acciones{display:flex;align-items:center;gap:10px;margin-top:10px}
.obs-enviar{background:var(--navy);color:#fff;border:0;border-radius:99px;padding:8px 18px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer}
.obs-enviar:disabled{opacity:.5;cursor:default}
.obs-cancelar{background:none;border:0;color:var(--gris-2);font-size:13px;font-family:inherit;cursor:pointer;text-decoration:underline}
.obs-estado{font-size:12px;color:var(--gris-2)}
.obs-estado.ok{color:#15803d}
.obs-estado.mal{color:#b91c1c}

/* La tabla reparte el ancho a mano y nunca pide scroll horizontal:
   tener que arrastrar para ver la ultima columna es no verla. */
@media (min-width:760px){
  table{table-layout:fixed}
  .tabla-scroll{overflow-x:visible}
  thead th:nth-child(1){width:9%}
  thead th:nth-child(2){width:6%}
  thead th:nth-child(3){width:14%}
  thead th:nth-child(4){width:14%}
  thead th:nth-child(5){width:8%}
  thead th:nth-child(6){width:30%}
  thead th:nth-child(7){width:9%}
  thead th:nth-child(8){width:10%}
  .asunto,.explicacion{max-width:none}
  /* solo donde puede venir una palabra larga: un mail o un asunto sin espacios */
  tbody td:nth-child(3),tbody td:nth-child(4){overflow-wrap:anywhere}
}
/* En pantallas chicas si conviene arrastrar, es eso o letra ilegible. */
@media (max-width:759px){ .tabla-scroll{overflow-x:auto} }
.aviso-borrador{color:var(--ambar);background:var(--ambar-bg);font-weight:500}
.reenviado-por{display:block;margin-top:3px;font-size:11px;color:var(--gris-2)}
.tipo.t-dudoso{box-shadow:inset 0 0 0 1px #f59e0b;background:var(--ambar-bg);color:var(--ambar)}

/* solapas Mails / Consorcios */
.solapas{background:var(--blanco);border-bottom:1px solid var(--linea)}
.solapas-interna{display:flex;gap:4px}
.solapa{appearance:none;background:none;border:0;border-bottom:2px solid transparent;padding:12px 18px;font:inherit;font-size:14px;font-weight:500;color:var(--gris-2);cursor:pointer}
.solapa:hover{color:var(--navy)}
.solapa[hidden]{display:none}
.solapa[aria-selected="true"]{color:var(--azul);border-bottom-color:var(--azul);font-weight:600}

/* tabla de consorcios */
#tabla-c{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
#tabla-c th,#tabla-c td{padding:11px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--linea)}
#tabla-c thead th{background:var(--fondo);font-size:12px;font-weight:600;color:var(--gris);border-top:0;white-space:nowrap}
#tabla-c tbody tr:hover{background:#fbfdff}
#tabla-c col{}
#tabla-c th:nth-child(1),#tabla-c td:nth-child(1){width:250px}
#tabla-c th:nth-child(2),#tabla-c td:nth-child(2){width:190px}
#tabla-c th:nth-child(3),#tabla-c td:nth-child(3){width:230px}
#tabla-c th:nth-child(4),#tabla-c td:nth-child(4){width:150px}
#tabla-c th:nth-child(5),#tabla-c td:nth-child(5){width:170px}
#tabla-c th:nth-child(6),#tabla-c td:nth-child(6){width:210px}
#tabla-c th:nth-child(7),#tabla-c td:nth-child(7){width:96px;text-align:right}
.cbu{font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.01em;display:block}
.cbu+.cbu{margin-top:4px}
.cuenta-chica{display:block;font-size:11px;color:var(--gris-2)}
.compartida{color:var(--ambar);font-weight:600;font-size:12px}
.compartida span{display:block;font-weight:400;color:var(--gris-2)}
.no-compartida{color:var(--gris-2);font-size:12px}
.icono{appearance:none;background:none;border:1px solid var(--linea);border-radius:8px;width:30px;height:30px;cursor:pointer;color:var(--gris);font-size:14px;line-height:1;padding:0}
.icono+.icono{margin-left:6px}
.icono:hover:not(:disabled){background:var(--fondo);color:var(--navy)}
.icono:disabled{opacity:.35;cursor:not-allowed}
.icono-borrar:hover:not(:disabled){border-color:var(--rojo);color:var(--rojo);background:var(--rojo-bg)}
.boton-alta{appearance:none;border:0;border-radius:99px;background:var(--navy);color:#fff;font:inherit;font-size:13px;font-weight:600;padding:10px 18px;cursor:pointer;white-space:nowrap}
.boton-alta:hover:not(:disabled){background:var(--azul)}
.boton-alta:disabled{opacity:.45;cursor:not-allowed}

/* formulario de alta */
.dialogo{border:0;border-radius:16px;padding:0;max-width:620px;width:calc(100% - 32px);box-shadow:0 24px 70px rgba(15,23,43,.24)}
.dialogo::backdrop{background:rgba(15,23,43,.45)}
.dialogo form{padding:28px 30px 22px}
.dialogo h2{margin:0;font-size:20px;color:var(--navy);letter-spacing:-.01em}
.dialogo h3{margin:22px 0 8px;font-size:13px;font-weight:600;color:var(--gris);text-transform:uppercase;letter-spacing:.04em}
.dialogo-sub{margin:6px 0 20px;font-size:13px;color:var(--gris-2)}
.dialogo label{display:block;font-size:12px;font-weight:600;color:var(--gris);margin:14px 0 6px}
.dialogo input[type=text],.dialogo input:not([type]){width:100%}
.dialogo input:not([type=checkbox]){width:100%;padding:10px 12px;border:1px solid var(--linea);border-radius:9px;font:inherit;font-size:14px;background:var(--fondo)}
.dialogo input:not([type=checkbox]):focus{outline:2px solid var(--azul-claro);outline-offset:1px;background:#fff}
.dialogo input.mal{border-color:var(--rojo);background:var(--rojo-bg)}
.obligatorio{color:var(--rojo)}
.ayuda-campo{margin:5px 0 0;font-size:11px;color:var(--gris-2)}
.error-campo{margin:5px 0 0;font-size:12px;color:var(--rojo)}
.error-general{margin:16px 0 0;font-size:13px;color:var(--rojo);background:var(--rojo-bg);border-radius:8px;padding:10px 12px}
.dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dos-columnas label{margin-top:14px}
.cuenta-caja{border:1px solid var(--linea);border-radius:10px;padding:12px 14px 14px;margin-bottom:10px;background:var(--fondo)}
.cuenta-caja .cabecera-cuenta{display:flex;justify-content:space-between;align-items:center}
.cuenta-caja .cabecera-cuenta span{font-size:12px;font-weight:600;color:var(--gris)}
.cuenta-caja label{margin-top:10px}
.tres-columnas{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.sacar{appearance:none;background:none;border:0;color:var(--gris-2);font-size:12px;cursor:pointer;text-decoration:underline}
.sacar:hover{color:var(--rojo)}
.casilla{display:flex!important;align-items:center;gap:9px;margin:18px 0 0!important;font-size:13px!important;font-weight:400!important;color:var(--navy-2)!important;cursor:pointer}
.casilla input{width:16px;height:16px;accent-color:var(--azul);cursor:pointer}
.dialogo-pie{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;padding-top:18px;border-top:1px solid var(--linea)}
.boton-secundario{appearance:none;border:1px solid var(--linea);border-radius:99px;background:#fff;color:var(--gris);font:inherit;font-size:13px;font-weight:500;padding:9px 16px;cursor:pointer}
.boton-secundario:hover{background:var(--fondo);color:var(--navy)}
.aviso-ok{margin:0 0 16px;font-size:13px;color:#166534;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:11px 14px}
@media (max-width:560px){.dos-columnas,.tres-columnas{grid-template-columns:1fr}}

/* cartel de eliminación */
.dialogo-chico{max-width:470px}
.cuerpo-baja{padding:28px 30px 22px}
.cuerpo-baja h2{margin:0 0 14px;font-size:18px;line-height:1.35;color:var(--navy);letter-spacing:-.01em}
.aviso-borrar{margin:0;font-size:14px;line-height:1.55;color:var(--navy-2);background:var(--rojo-bg);border:1px solid #fecdd3;border-radius:10px;padding:13px 15px}
.aviso-borrar b{color:var(--rojo)}
.boton-borrar{appearance:none;border:0;border-radius:99px;background:var(--rojo);color:#fff;font:inherit;font-size:13px;font-weight:600;padding:10px 20px;cursor:pointer}
.boton-borrar:hover:not(:disabled){background:#9f0d32}
.boton-borrar:disabled{opacity:.5;cursor:not-allowed}

/* la cruz de cerrar queda fija arriba mientras se baja por el formulario (02/10/2026) */
.dialogo-cabecera{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-28px -30px 0;padding:20px 30px 12px;background:#fff;border-bottom:1px solid transparent}
.cerrar-dialogo{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:var(--fondo);color:var(--gris);font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center}
.cerrar-dialogo:hover{background:var(--linea);color:var(--navy)}
.cerrar-dialogo:focus-visible{outline:2px solid var(--azul-claro);outline-offset:2px}
/* los ejemplos en un gris claro, para que no parezca que el formulario ya esta lleno */
.dialogo input::placeholder{color:#b3bfcb;opacity:1}
/* con un formulario abierto, la rueda del mouse mueve solo el formulario, nunca la
   pagina de atras (02/10/2026) */
body:has(dialog[open]){overflow:hidden}
.dialogo{max-height:calc(100vh - 48px);overflow-y:auto;overscroll-behavior:contain}

/* Ver más, debajo de la tabla (13/10/2026) */
.ver-mas { margin-left: 8px; padding: 4px 12px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.nota-vieja { margin-left: 8px; opacity: .75; }