/* Tag Financial Home — estilos.
   Paleta de marca: VERDE institucional + DORADO + CREMA, combinados en cada
   segmento. Los colores se definen en config.php y se inyectan como variables
   CSS por estilos_dinamicos(); los valores de :root aquí son el mismo juego
   de respaldo, para que el sitio se vea igual con o sin estilos dinámicos. */
:root{
  /* Variables históricas */
  --primario:#0F5132; --primario-oscuro:#0B3B2C; --acento:#C9A227;
  --fondo:#FAF6EC; --tarjeta:#ffffff; --texto:#1d2420; --gris:#6B7263;
  --borde:#DCD8BE; --rojo:#c0392b;
  /* Tokens de marca */
  --verde:#0F5132; --verde-oscuro:#0B3B2C; --verde-medio:#17603F;
  --verde-exito:#2e9e5b;
  --dorado:#C9A227; --dorado-claro:#E7C65B; --dorado-oscuro:#8A6D1D;
  --crema:#FAF6EC; --crema-claro:#FFFDF6; --crema-dorado:#F6EBCE;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--crema);color:var(--texto);line-height:1.45;padding:0 12px 40px}
a{color:var(--primario)}
::selection{background:var(--dorado);color:var(--verde-oscuro)}
.contenedor{max-width:760px;margin:0 auto}

/* Encabezado: banda verde oscuro con acento dorado */
.cabecera{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:8px;background:var(--verde-oscuro);
  border-bottom:3px solid var(--dorado);border-radius:0 0 14px 14px;
  padding:14px 16px 12px;margin:0 -2px}
.logo{font-size:1.35rem;font-weight:800;color:var(--primario-oscuro)}
.logo span{color:var(--acento)}
.cabecera .logo{color:var(--crema)}
.cabecera .logo span{color:var(--dorado)}
.usuario{font-size:.85rem;color:var(--gris);text-align:right}
.cabecera .usuario{color:#EDE7CF}
.usuario .codigo{display:inline-block;background:var(--primario);color:#fff;
  border-radius:20px;padding:1px 10px;font-weight:700;font-size:.8rem;margin-left:4px}
.cabecera .usuario .codigo{background:var(--dorado);color:var(--verde-oscuro)}
.usuario a{font-size:.85rem}
.cabecera .usuario a{color:var(--dorado-claro)}

/* Tarjetas y secciones */
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;
  padding:16px;margin:12px 0;box-shadow:0 1px 3px rgba(20,60,45,.05)}
/* Listas del panel: tarjetas blancas y crema alternadas, borde verdoso */
#zona-listas .tarjeta{border-color:#CFD8BC}
#zona-listas .tarjeta:nth-of-type(even){background:var(--crema-claro)}
h2.titulo-seccion{font-size:1.05rem;margin:20px 0 4px;color:var(--verde-oscuro);
  border-left:5px solid var(--dorado);padding-left:10px}
.subtitulo{font-size:.85rem;color:var(--gris)}

/* Tarjeta de estado: verde con cifras y barra en dorado */
#zona-estado{background:linear-gradient(135deg,var(--verde-oscuro),var(--verde) 60%,var(--verde-medio));
  color:var(--crema-claro);border-color:var(--verde-oscuro)}
#zona-estado .subtitulo{color:#E4DDBE}
#zona-estado strong{color:var(--dorado-claro)}
.barra{background:rgba(250,246,236,.28);border-radius:20px;height:16px;overflow:hidden;margin:8px 0}
.barra .relleno{background:linear-gradient(90deg,var(--dorado),var(--dorado-claro));
  height:100%;border-radius:20px;transition:width .3s}
.estado-linea{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px;
  font-size:.92rem}
.estado-linea .grande{font-size:1.15rem;font-weight:800}
#zona-estado .estado-linea .grande{color:var(--dorado-claro)}

/* Próxima responsabilidad: crema dorado con borde dorado */
.proxima{border:2px solid var(--dorado);background:var(--crema-dorado)}
.proxima .monto{font-size:1.5rem;font-weight:800;color:var(--verde-oscuro)}
.proxima.vencida{border-color:var(--rojo);background:#fdf3f2}
.proxima.vencida .monto{color:var(--rojo)}
.etiqueta{display:inline-block;border-radius:12px;padding:1px 9px;font-size:.75rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.etiqueta.pendiente{background:#F3E3B3;color:#7A5B00}
.etiqueta.pagado{background:#DFF3E4;color:#146C2E}
.etiqueta.vencida{background:#f9dcd8;color:var(--rojo)}
.etiqueta.banco{background:#E9E6DA;color:#5C5644}
.etiqueta.manual{background:#F0EEE6;color:#6B675A}

/* Lista de pagos */
.pago{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--borde)}
.pago:last-child{border-bottom:none}
.pago .info{flex:1;min-width:0}
.pago .concepto{font-weight:600}
.pago .detalle{font-size:.82rem;color:var(--gris)}
.pago .monto{font-weight:800;white-space:nowrap}
.pago.pagado .concepto{color:var(--gris);text-decoration:line-through}

/* Botones y formularios */
.btn{display:inline-block;border:none;border-radius:10px;padding:9px 14px;
  font-size:.92rem;font-weight:700;cursor:pointer;text-decoration:none;text-align:center}
.btn-primario{background:var(--primario);color:#fff}
.btn-primario:hover{background:var(--verde-medio)}
.btn-primario:active{background:var(--primario-oscuro)}
.btn-suave{background:var(--crema-dorado);color:var(--primario-oscuro);
  border:1px solid var(--primario)}
.btn-suave:hover{background:#EFE0B8}
.btn-peligro{background:#f9dcd8;color:var(--rojo)}
.btn-bloque{display:block;width:100%}
form .campo{margin:10px 0}
label{display:block;font-size:.85rem;font-weight:600;margin-bottom:4px}
input,select,textarea{width:100%;padding:10px;border:1px solid var(--borde);
  border-radius:10px;font-size:1rem;background:#fff;color:var(--texto)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--dorado);border-color:var(--dorado)}
.fila-campos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){.fila-campos{grid-template-columns:1fr}}

/* Selector de mes: tarjeta crema con borde dorado suave */
.selector-mes{background:var(--crema-claro);border-color:#E7DCB6}

/* Avisos */
.aviso{border-radius:10px;padding:11px 13px;margin:12px 0;font-size:.93rem}
.aviso.ok{background:#dff3e4;color:#146c2e}
.aviso.error{background:#f9dcd8;color:#7c211a}
.aviso.info{background:#E9E6DA;color:#5C5644}

/* Tablas (admin) */
.tabla{width:100%;border-collapse:collapse;font-size:.9rem}
.tabla th,.tabla td{padding:8px 6px;border-bottom:1px solid var(--borde);text-align:left;vertical-align:top}
.tabla th{color:var(--primario-oscuro);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.04em;border-bottom:2px solid var(--dorado)}

/* Login */
.login-caja{max-width:420px;margin:8vh auto 0}
.tarjeta.login-caja{border-top:5px solid var(--dorado);background:var(--crema-claro)}
.login-caja .logo{text-align:center;font-size:1.7rem;margin-bottom:6px}
.login-caja .subtitulo{text-align:center;margin-bottom:8px}
details{margin:12px 0}
summary{cursor:pointer;font-weight:700;color:var(--primario-oscuro);padding:6px 0}
summary::marker{color:var(--dorado)}
.pie{margin-top:28px;text-align:center;font-size:.8rem;color:var(--gris)}
.selector-mes{display:flex;gap:8px;align-items:end}
.selector-mes .campo{flex:1;margin:0}

.logo-img{height:42px;width:auto;vertical-align:middle;margin-right:10px;border-radius:9px}

/* ===== Portada de ingreso (login de clientes): fondo verde llamativo ===== */
body.portada{background:linear-gradient(160deg,#0B3B2C 0%,#0F5132 55%,#17603F 100%);background-attachment:fixed;min-height:100vh}
body.portada .contenedor{max-width:430px;padding-top:7vh}
body.portada .login-caja{background:#FFFDF6;border:2px solid #C9A227;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.35);text-align:center;padding:32px 28px}
body.portada .login-caja .logo{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:1.5rem;color:#0B3B2C}
body.portada .login-caja .logo-img{height:78px;margin-right:0;border-radius:14px;box-shadow:0 6px 18px rgba(11,59,44,.35)}
body.portada .login-caja .campo{text-align:left}
body.portada .pie{color:#F6EBCE;text-align:center}

/* ===== Ítems «No pago» (no a tu cargo) ===== */
.pago.no-pago{opacity:.65;background:#FBF7EA}
.etiqueta.no-pago{background:#EFE7CF;color:#7A5B00;border:1px solid #C9A227}
.ahorro-linea{margin-top:8px;font-weight:600}