/* ===== Servicios en línea: cuentas de contribuyentes y formularios ===== */


.cuenta-body > *{ max-width: 980px; }
.cuenta-angosta{ max-width: 520px; }
.cuenta-intro{ color: var(--slate); margin-bottom: 24px; max-width: 62ch; }

.form-publico{ background:#fff; border:1px solid var(--line); padding:28px; display:flex; flex-direction:column; gap:18px; }
.form-publico h2{ font-size:1.25rem; margin-bottom:-4px; }
.form-publico fieldset{ border:none; display:flex; flex-direction:column; gap:18px; }
.form-publico legend{ font-family:'Fraunces', serif; font-weight:600; font-size:1.15rem; color:var(--gulf-teal-dark); margin-bottom:14px; }
.form-publico label{ display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:0.95rem; }
.form-publico input[type=text], .form-publico input[type=email], .form-publico input[type=tel],
.form-publico input[type=password], .form-publico select, .form-publico textarea{
  font: inherit; font-weight:400; padding:11px 12px; border:1px solid rgba(28,42,44,0.28); border-radius:var(--radius);
  background:#fff; color:var(--ink); width:100%;
}
.form-publico textarea{ min-height:110px; resize:vertical; }
.form-publico input:focus, .form-publico select:focus, .form-publico textarea:focus{
  outline:2px solid var(--mangrove); outline-offset:1px; border-color:var(--mangrove);
}
.form-publico .ayuda{ font-weight:400; font-size:0.85rem; color:var(--slate); }
.form-publico .opcional{ font-weight:400; color:var(--slate); font-size:0.85rem; }
.form-publico .casilla{ flex-direction:row; align-items:flex-start; gap:10px; font-weight:400; }
.form-publico .casilla input{ margin-top:4px; width:18px; height:18px; flex:none; accent-color: var(--gulf-teal); }
.fila-campos{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.fila-campos-ancha{ display:grid; grid-template-columns: 200px 1fr; gap:18px; }

.boton-form{ display:inline-block; font:inherit; font-weight:700; padding:13px 24px; border:none; border-radius:var(--radius);
  background:var(--gulf-teal); color:#fff; cursor:pointer; text-align:center; }
.boton-form:hover{ background:var(--mangrove); }
.boton-form-borde{ background:transparent; color:var(--gulf-teal); border:2px solid var(--gulf-teal); padding:11px 22px; }
.boton-form-borde:hover{ background:var(--gulf-teal); color:#fff; }
.acciones-form{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.enlace-secundario{ color:var(--mangrove); text-decoration:underline; text-underline-offset:3px; font-size:0.95rem; }

.mensaje{ padding:14px 18px; border-left:4px solid; background:#fff; margin-bottom:20px; }
.mensaje-ok{ border-color:#2E7D4F; }
.mensaje-error{ border-color:#B3261E; }
.mensaje-info{ border-color:var(--harvest-gold); }
.mensaje ul{ margin:6px 0 0 18px; }

.campo-trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Panel de la cuenta */
.cuenta-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; margin-bottom:32px; }
.tarjeta{ background:#fff; border:1px solid var(--line); padding:24px; display:flex; flex-direction:column; gap:12px; }
.tarjeta h2{ font-size:1.2rem; }
.tarjeta p{ color:var(--slate); }
.tarjeta .boton-form, .tarjeta .boton-form-borde{ align-self:flex-start; }
.datos-lista{ display:grid; grid-template-columns: max-content 1fr; gap:6px 16px; font-size:0.95rem; }
.datos-lista dt{ color:var(--slate); }
.datos-lista dd{ font-weight:600; word-break:break-word; }
.etiqueta-estado{ display:inline-block; font-size:0.78rem; font-weight:700; padding:3px 10px; border-radius:99px; }
.etiqueta-pendiente{ background:#FFF1D6; color:#7A4B00; }
.etiqueta-aplicada{ background:#DDF2E4; color:#1D5C36; }
.etiqueta-rechazada{ background:#FBE1DF; color:#8C1D18; }
.etiqueta-neutra{ background:#E8EEEF; color:var(--gulf-teal-dark); }
.cuenta-seccion{ margin-top:8px; margin-bottom:32px; }
.cuenta-seccion > h2{ font-size:1.35rem; margin-bottom:14px; }
.nota-solicitud{ font-size:0.88rem; color:var(--slate); margin-top:4px; }

.texto-legal{ background:#fff; border:1px solid var(--line); padding:28px; max-width:75ch; }
.texto-legal h2{ font-size:1.15rem; margin:22px 0 8px; }
.texto-legal h2:first-child{ margin-top:0; }
.texto-legal p, .texto-legal li{ margin-bottom:8px; }
.texto-legal ul{ margin-left:20px; }
/* Términos, Aviso de Privacidad y Mis datos (noviembre 2026) */
.texto-legal ol{ margin-left:22px; }
.texto-legal h3{ font-size:1rem; margin:18px 0 6px; }
.texto-legal .mensaje{ margin-bottom:16px; }
.tabla-legal{ width:100%; border-collapse:collapse; margin:10px 0 14px; font-size:0.92rem; }
.tabla-legal th, .tabla-legal td{ border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top; }
.tabla-legal th{ background:#F8F4EC; }
.lista-simple{ list-style:none; margin:0 0 10px; padding:0; }
.lista-simple li{ padding:6px 0; border-bottom:1px solid var(--line); font-size:0.92rem; }
.aviso-datos{ font-size:0.88rem; background:#fff; border-left:4px solid var(--harvest-gold, #ED6637); padding:12px 16px; margin:0 0 20px; }
.footer-legal a{ margin-left:14px; }
/* Aviso de cierre de sesión por inactividad */
.aviso-sesion{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:9999; width:min(520px, calc(100% - 32px));
  background:#fff; border:2px solid var(--harvest-gold, #ED6637); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.25); padding:16px 18px; }
.aviso-sesion[hidden]{ display:none; }
.aviso-sesion p{ margin:0 0 12px; }
.aviso-sesion .boton-form{ margin-right:8px; }

@media (max-width: 720px){
  .fila-campos, .fila-campos-ancha, .cuenta-grid{ grid-template-columns: 1fr; }
  .form-publico, .tarjeta, .texto-legal{ padding:20px; }
}

/* ===== Botón "Servicios en línea / Mi cuenta" a la derecha del menú ===== */
.nav-bar{ display:flex; align-items:center; gap:12px; }
.nav-bar .nav-lista{ flex:1 1 auto; min-width:0; }
.nav-cuenta{
  flex:none; display:inline-flex; align-items:center; gap:8px; margin-left:auto;
  padding:8px 16px; border-radius:999px; white-space:nowrap;
  background: var(--harvest-gold); color: var(--texto-sobre-acento, #1C2A2C);
  font:700 0.85rem 'Public Sans', sans-serif; letter-spacing:0.02em;
  border:2px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.nav-cuenta:hover, .nav-cuenta:focus-visible{ background: transparent; color: var(--salt-white); border-color: var(--salt-white); }
.nav-cuenta.activo{ background: transparent; color: var(--salt-white); border-color: var(--harvest-gold); }
.nav-cuenta svg{ flex:none; }

/* Escritorio: el menú se compacta un poco para que quepa el botón en la misma línea */
@media (min-width: 1101px){
  .nav-bar .nav-lista{ flex-wrap:nowrap; }
  .nav-bar .nav-link{ padding-left:13px; padding-right:13px; }
}
@media (min-width: 1101px) and (max-width: 1240px){
  .nav-bar .nav-link{ padding-left:10px; padding-right:10px; font-size:0.84rem; }
  .nav-cuenta{ padding:7px 13px; font-size:0.8rem; }
}

/* Pantallas medianas (tabletas, laptops pequeñas): mismo menú que en celular */
@media (min-width: 881px) and (max-width: 1100px){
  .nav-toggle{ display:flex; }
  .nav-lista{ display:none; flex-direction:column; padding-bottom:10px; }
  nav.main-nav.menu-abierto .nav-lista{ display:flex; }
  nav.main-nav{ max-height:100vh; overflow-y:auto; }
  .nav-link{ width:100%; justify-content:space-between; padding:13px 4px; border-bottom:1px solid rgba(255,255,255,0.08); }
  .mega{ position:static; box-shadow:none; max-height:none; border-top:none; }
  .mega-grid{ columns:1; padding:14px 18px 4px; }
}

/* Celular y pantallas medianas: botón de Menú a la izquierda, Servicios en línea a la derecha, la lista abajo */
@media (max-width: 1100px){
  .nav-bar{ flex-wrap:wrap; gap:0; }
  .nav-bar .nav-lista{ order:3; flex-basis:100%; }
  .nav-cuenta{ padding:7px 14px; font-size:0.82rem; }
}

/* Nombre completado desde el registro de contribuyentes */
.form-publico input.campo-confirmado{ background:#F1F7F2; border-color:#7BB38D; color:var(--ink); }

/* ===== Estado de cuenta ===== */
.tarjeta-destacada{ border-top:4px solid var(--harvest-gold); }
.ec-encabezado{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:20px; }
.ec-resumen{ display:grid; grid-template-columns: 2fr 1fr; gap:2px; background:var(--line); border:1px solid var(--line); margin-bottom:10px; }
.ec-total{ background:#fff; padding:20px 22px; display:flex; flex-direction:column; gap:4px; }
.ec-total-secundario{ background:#FBFAF6; }
.ec-etiqueta{ font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--slate); }
.ec-monto{ font-family:'Fraunces', serif; font-size:2rem; line-height:1.1; color:var(--gulf-teal-dark); font-variant-numeric:tabular-nums; }
.ec-total-secundario .ec-monto{ font-size:1.5rem; }
.ec-desglose{ font-size:0.88rem; color:var(--slate); }
.ec-corte{ font-size:0.88rem; color:var(--slate); margin-bottom:24px; }
.ec-cuenta{ margin-bottom:28px; }
.ec-cuenta-cab{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; padding-bottom:8px; margin-bottom:10px; border-bottom:2px solid var(--gulf-teal-dark); }
.ec-cuenta-cab h3{ font-size:1.1rem; margin:0; }
.ec-cuenta-desc{ font-size:0.9rem; color:var(--slate); margin-top:2px; }
.ec-cuenta-total{ font-family:'Fraunces', serif; font-weight:600; font-size:1.15rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ec-tabla th.num, .ec-tabla td.num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ec-tabla .ec-por-vencer td{ background:#FFFCF4; }
.ec-nper{ color:var(--slate); font-size:0.82rem; }
.ec-legal{ font-size:0.85rem; color:var(--slate); border-top:1px solid var(--line); padding-top:14px; max-width:80ch; }
@media (max-width: 720px){
  .ec-resumen{ grid-template-columns:1fr; }
  .ec-monto{ font-size:1.6rem; }
  .ec-tabla td.num{ text-align:right; }
}

/* ===== Verificación de identidad ===== */
.verif-opciones{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; align-items:start; }
.verif-paso{ font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--acento-texto, var(--mangrove)); }
.verif-pasos{ margin:0 0 4px 18px; color:var(--slate); display:flex; flex-direction:column; gap:6px; }
.verif-pasos a{ color:var(--mangrove); text-decoration:underline; font-weight:600; }
.verif-form-codigo{ padding:0; border:none; margin-top:6px; }
.verif-codigo{ font-size:1.4rem !important; letter-spacing:0.3em; max-width:200px; font-variant-numeric:tabular-nums; }
@media (max-width: 1000px){
  .verif-opciones{ grid-template-columns:1fr; }
}

/* ===== Impresión del estado de cuenta ===== */
@media print{
  .utility-bar, .site-header nav, .main-nav, .nav-bar, footer, .site-footer, .no-imprimir, .aviso-sitio, .breadcrumb{ display:none !important; }
  .page-hero{ background:none !important; color:#000 !important; padding:0 0 8px !important; }
  .page-hero h1{ color:#000 !important; font-size:20pt; }
  body{ background:#fff !important; }
  .ec-total, .ec-total-secundario, .tabla-actas-caja{ background:#fff !important; }
  .ec-cuenta{ break-inside:avoid; }
  .mensaje{ border:1px solid #999; }
}

/* Tabla del estado de cuenta con estilos propios (así se ve igual en el panel, que no carga style.css).
   Solo en pantallas grandes: en celular se usa el formato de tarjetas de style.css. */
@media (min-width: 641px){
  .estado-cuenta .tabla-actas-caja{ overflow-x:auto; background:#fff; border:1px solid var(--line, #e2ddd1); }
  .estado-cuenta .ec-tabla{ width:100%; border-collapse:collapse; min-width:720px; font-size:0.92rem; }
  .estado-cuenta .ec-tabla th{ text-align:left; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
    color:var(--slate, #5b6766); padding:10px 14px; border-bottom:2px solid var(--line, #e2ddd1); white-space:nowrap; }
  .estado-cuenta .ec-tabla td{ padding:9px 14px; border-bottom:1px solid var(--line, #e2ddd1); vertical-align:middle; }
  .estado-cuenta .ec-tabla tr:last-child td{ border-bottom:none; }
  .estado-cuenta .ec-tabla th.num, .estado-cuenta .ec-tabla td.num{ text-align:right; padding-left:18px; }
  .estado-cuenta .ec-tabla td.mono{ font-family:inherit; font-variant-numeric:tabular-nums; white-space:nowrap; }
}