/* ════════ TOKENS — escudo de Vallenar ════════ */
:root{
  --verde:#0D832F;
  --verde-osc:#085A20;
  --verde-tinte:#E5F3E9;
  --lima:#87B91A;
  --lima-tinte:#F1F6E0;
  --dorado:#FECD1B;
  --dorado-osc:#8A6B00;
  --dorado-tinte:#FFF6D6;
  --azul:#373F92;
  --azul-tinte:#E9EAF6;
  --naranjo:#F18650;
  --rojo:#C03A2B;
  --rojo-tinte:#F9E8E5;
  --papel:#F7F6F2;
  --blanco:#FFFFFF;
  --tinta:#20301F;
  --gris:#5D6B5E;
  --linea:#DFE0D6;
  --radio:10px;
  --sombra:0 1px 2px rgba(32,48,31,.06), 0 4px 14px rgba(32,48,31,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--papel);color:var(--tinta);
  font-size:16px;line-height:1.5;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--verde);outline-offset:2px;border-radius:4px}

/* ════════ ESTRUCTURA ════════ */
.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}

/* ──── Navegación lateral ──── */
.nav-lateral{
  background:var(--verde);color:#fff;
  border-right:4px solid var(--lima);
  padding:24px 0;position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
}
/* ──── Bloque de Marca (Corrección Óptica) ──── */
.marca {
  display: flex;
  align-items: center;
  gap: 14px; /* Le damos 2px más de respiro entre el logo y el texto */
  /* Cambiamos el 20px por 24px a los lados. 
     Así iguala los 24px superiores del nav-lateral formando una esquina perfecta */
  padding: 0 24px 24px; 
  border-bottom: 1px solid rgba(255,255,255,.18);
}

.marca img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: #fff;
  border-radius: 9px;
  padding: 3px;
  flex-shrink: 0; /* Evita que el logo se deforme en pantallas pequeñas */
}

/* Controlamos el div que envuelve a strong y span */
.marca > div {
  display: flex;
  flex-direction: column;
  gap: 2px; /* Separación exacta y controlada entre los dos textos */
  margin-top: 1px; /* Ajuste óptico para alinear el centro de las letras con el centro del logo */
}

.marca strong {
  font-size: 15px;
  font-weight: 800;
  line-height: 1; /* Le quitamos el interlineado heredado para que no genere espacios fantasma */
  display: block;
}

.marca span {
  font-size: 11.5px;
  opacity: 0.8;
  line-height: 1; /* Le quitamos el interlineado heredado */
}
.nav-lateral ul{list-style:none;padding:14px 12px;flex:1}
.nav-lateral li a{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:8px;
  font-size:15px;font-weight:600;color:rgba(255,255,255,.85);
  transition:background .15s;
}
.nav-lateral li a:hover{background:rgba(255,255,255,.12);color:#fff}
.nav-lateral li a.activo{background:#fff;color:var(--verde)}
.nav-lateral svg{width:21px;height:21px;flex-shrink:0}
.nav-ayuda{
  margin:0 16px;padding:14px;border-radius:var(--radio);
  background:rgba(255,255,255,.12);font-size:13px;line-height:1.45;
}
.nav-ayuda strong{display:block;font-size:14px;margin-bottom:2px}
.nav-ayuda a{text-decoration:underline;font-weight:600}

/* ──── Barra superior ──── */
.barra-superior{
  display:flex;align-items:center;gap:16px;
  padding:14px 28px;background:var(--blanco);
  border-bottom:1px solid var(--linea);
  position:sticky;top:0;z-index:10;
}
.usuario{margin-left:auto;display:flex;align-items:center;gap:10px}
.usuario .avatar{
  width:38px;height:38px;border-radius:50%;
  background:var(--verde-tinte);color:var(--verde);
  display:grid;place-items:center;font-weight:800;font-size:14px;
}
.usuario span{font-size:14px;font-weight:600}
.btn-salir{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:600;color:var(--gris);
  padding:7px 12px;border-radius:8px;border:1.5px solid var(--linea);background:var(--blanco);
  transition:border-color .15s,color .15s;cursor:pointer;
}
.btn-salir:hover{border-color:var(--rojo);color:var(--rojo)}
@media(max-width:560px){.usuario span{display:none}}

/* ════════ CONTENIDO ════════ */
main{padding:28px;max-width:1080px;width:100%;margin:0 auto}
.saludo h1{font-size:clamp(22px,4vw,28px);font-weight:800;letter-spacing:-.02em}
.saludo p{color:var(--gris);margin-top:2px}
.seccion{margin-top:30px}
.seccion>h2{
  font-size:13px;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:var(--gris);margin-bottom:12px;
  display:flex;align-items:baseline;gap:10px;
}
.seccion>h2 a{font-size:13px;text-transform:none;letter-spacing:0;font-weight:600;color:var(--verde);text-decoration:underline}

/* ──── Alertas ──── */
.alerta{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid;border-left-width:5px;border-radius:8px;
  padding:13px 16px;background:var(--blanco);font-size:14.5px;
  margin-bottom:16px;
}
.alerta svg{width:21px;height:21px;flex-shrink:0;margin-top:1px}
.alerta strong{display:block;font-size:15px}
.a-exito{border-color:var(--verde);background:var(--verde-tinte)}
.a-exito svg{color:var(--verde)}
.a-info{border-color:var(--azul);background:var(--azul-tinte)}
.a-info svg{color:var(--azul)}
.a-advertencia{border-color:var(--dorado);background:var(--dorado-tinte)}
.a-advertencia svg{color:var(--dorado-osc)}
.a-error{border-color:var(--rojo);background:var(--rojo-tinte)}
.a-error svg{color:var(--rojo)}

/* ──── Chips de estado ──── */
.chip{display:inline-block;font-size:12.5px;font-weight:600;padding:4px 12px;border-radius:999px}
.c-verde{background:var(--verde-tinte);color:var(--verde)}
.c-dorado{background:var(--dorado-tinte);color:var(--dorado-osc)}
.c-rojo{background:var(--rojo-tinte);color:var(--rojo)}
.c-azul{background:var(--azul-tinte);color:var(--azul)}
.c-gris{background:#f0f0f0;color:#666}

/* ──── Grilla de trámites ──── */
.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.atajo{
  background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--radio);padding:18px;
  display:flex;flex-direction:column;gap:10px;
  box-shadow:var(--sombra);transition:border-color .15s,transform .15s;
}
.atajo:hover{border-color:var(--lima);transform:translateY(-2px)}
.atajo .icono{
  width:42px;height:42px;border-radius:9px;
  background:var(--verde-tinte);color:var(--verde);
  display:grid;place-items:center;
}
.atajo .icono svg{width:22px;height:22px}
.atajo strong{font-size:15px;font-weight:600;line-height:1.3}
.atajo span{font-size:13px;color:var(--gris);line-height:1.4}
.atajo em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--verde);margin-top:auto}

/* ──── Avisos ──── */
.avisos{display:grid;gap:10px}
.aviso{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);
  padding:14px 16px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--sombra);
}
.aviso .fecha{
  flex-shrink:0;text-align:center;min-width:48px;
  background:var(--verde-tinte);border-radius:8px;padding:7px 6px;color:var(--verde);
}
.aviso .fecha b{display:block;font-size:18px;font-weight:800;line-height:1}
.aviso .fecha small{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.aviso p{font-size:14.5px}
.aviso p strong{display:block;font-size:15px;margin-bottom:1px}
.aviso.urgente .fecha{background:var(--rojo-tinte);color:var(--rojo)}

/* ──── Pie ──── */
footer{
  margin-top:44px;padding:18px 0 6px;border-top:1px solid var(--linea);
  font-size:13px;color:var(--gris);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
footer a{text-decoration:underline}

/* ════════ RESPONSIVO ════════ */
@media(max-width:880px){
  .app{grid-template-columns:1fr}
  .nav-lateral{
    position:fixed;inset:auto 0 0 0;height:auto;z-index:20;
    padding:0;flex-direction:row;
    border-right:0;border-top:4px solid var(--lima);
  }
  .marca,.nav-ayuda{display:none}
  .nav-lateral ul{display:flex;width:100%;padding:6px 8px;gap:2px}
  .nav-lateral li{flex:1}
  .nav-lateral li a{
    flex-direction:column;gap:3px;padding:8px 4px;
    font-size:11px;text-align:center;border-radius:8px;
  }
  .nav-lateral li a.activo{background:rgba(255,255,255,.18);color:#fff}
  main{padding:20px 16px 96px}
  .barra-superior{padding:12px 16px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── Cabecera institucional ── */
.cabecera{background:var(--verde);color:#fff;padding:18px 0;border-bottom:5px solid var(--lima)}
.cabecera .cont{max-width:480px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:14px}
.cabecera img{width:48px;height:48px;object-fit:contain;background:#fff;border-radius:9px;padding:4px;flex-shrink:0}
.cabecera strong{font-size:16px;font-weight:800;display:block;line-height:1.2}
.cabecera span{font-size:13px;opacity:.85}

/* ── Contenido centrado ── */
.pagina{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px}
.tarjeta{
  background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--radio);box-shadow:var(--sombra);
  padding:36px 40px;width:100%;max-width:440px;
}
.tarjeta h1{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.tarjeta .subtitulo{color:var(--gris);font-size:14.5px;margin-bottom:24px}
.tarjeta .subtitulo a{color:var(--verde);font-weight:600;text-decoration:underline}

/* ── Botón ClaveÚnica Oficial ── */
.btn-cu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px; /* Espaciado entre elementos según guía */
  background-color: #0F69C4; /* Color oficial */
  color: #FFFFFF;
  font-family: 'Roboto', sans-serif; /* Tipografía obligatoria */
  font-weight: bold; /* Peso de fuente */
  font-size: 16px; /* 1rem */
  padding: 8px 14px; /* Espaciado interior vertical y horizontal */
  height: 48px; /* Altura total de botón obligatoria (2 rem + 16px) */
  border-radius: 4px; /* La guía permite bordes a 0px, 4px o 99px */
  text-decoration: none;
  border: transparent;
  transition: background-color 0.15s, transform 0.1s;
}

.btn-cu:hover {
  background-color: #0B4E91; /* Estado hover oficial */
}

.btn-cu:active {
  background-color: #07305A; /* Estado active oficial */
  transform: translateY(1px);
}

.btn-cu:focus {
  outline: 4px solid #FFBE5C; /* Foco accesible oficial */
  outline-offset: 2px;
}

/* Dimensiones del isotipo de ClaveÚnica */
.btn-cu img, .btn-cu svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ── Botón Clave Tributaria SII ── */
.btn-sii {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%; /* Ocupa el ancho completo al igual que ClaveÚnica */
  height: 48px; /* Mantiene los 48px de altura del estándar anterior */
  padding: 8px 14px;
  border-radius: 4px; /* Mismo radio que el botón de CU */
  background-color: transparent;
  color: #F37021; /* Naranja característico del SII */
  border: 2px solid #F37021;
  font-family: 'Archivo', sans-serif; /* Retomamos la fuente principal de tu web */
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, transform 0.1s;
}

.btn-sii:hover {
  background-color: #F37021;
  color: #FFFFFF;
}

.btn-sii:active {
  transform: translateY(1px);
}

.btn-sii svg {
  flex-shrink: 0;
}

/* ── Separador ── */
.separador{
  display:flex;align-items:center;gap:12px;
  color:var(--gris);font-size:13px;margin:22px 0;
}
.separador::before,.separador::after{content:'';flex:1;height:1px;background:var(--linea)}

/* ── Alerta de error ── */
.alerta-error{
  display:flex;gap:10px;align-items:flex-start;
  border:1px solid var(--rojo);border-left-width:5px;border-radius:8px;
  padding:12px 14px;background:var(--rojo-tinte);font-size:14px;
  margin-bottom:20px;
}
.alerta-error svg{width:19px;height:19px;flex-shrink:0;margin-top:1px;color:var(--rojo)}

/* ── Texto informativo ── */
.info-cu{
  margin-top:20px;padding:14px;border-radius:8px;
  background:var(--verde-tinte);font-size:13.5px;color:var(--gris);
  border:1px solid #c3e6cc;line-height:1.5;
}
.info-cu strong{color:var(--tinta)}

/* ── Pie ── */
.pie-login{
  padding:18px 24px;text-align:center;
  font-size:13px;color:var(--gris);border-top:1px solid var(--linea);
  display:flex;justify-content:center;gap:16px;flex-wrap:wrap;
}
.pie-login a{color:var(--verde);text-decoration:underline}

/* Sticky Footer */
.content-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensure it takes full viewport height */
}

.content-wrapper main {
  flex: 1; /* Allow main content to grow and push footer down */
}

/* ── 1. Nuevo layout específico para la vista de login ── */
.layout-login {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Obliga al body a usar al menos el 100% del alto de la ventana */
}

/* ── 2. Modificar la regla existente de la cabecera institucional ── */
.cabecera .cont {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center; /* <-- Agrega esta línea para centrar el escudo y los textos */
  gap: 14px;
}

/* Modificamos específicamente el footer de la aplicación para mantener el ancho */
.content-wrapper footer {
  max-width: 1080px;
  width: 100%;
  margin: 44px auto 0; /* Centrado horizontal, conserva tu margen superior original */
  padding: 18px 28px 24px; /* 28px a los lados para igualar el padding del main */
  border-top: 1px solid var(--linea);
  font-size: 13px;
  color: var(--gris);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Evita que los enlaces del footer pierdan el subrayado que tenías definido */
.content-wrapper footer a {
  text-decoration: underline;
}

/* ════════ MÓDULO PERFIL ════════ */

/* Panel de datos de solo lectura */
.panel-dato{
  background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--radio);padding:20px;box-shadow:var(--sombra);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;
}
.dato span{
  display:block;font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--gris);margin-bottom:4px;
}
.dato strong{font-size:16px;font-weight:600}

/* Formulario de edición */
.form-perfil{
  background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--radio);padding:24px;box-shadow:var(--sombra);
}
.form-fila{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;margin-bottom:16px;
}
.campo label{
  display:block;font-size:13px;font-weight:600;
  margin-bottom:6px;color:var(--tinta);
}
.campo input,.campo select{
  width:100%;padding:10px 12px;
  border:1.5px solid var(--linea);border-radius:8px;
  font:inherit;font-size:15px;
  background:var(--blanco);color:var(--tinta);
  transition:border-color .15s;
}
.campo input:focus,.campo select:focus{
  outline:none;border-color:var(--verde);
}
.campo input::placeholder{color:var(--gris);opacity:.7}

/* Botón principal (guardar / enviar) */
.btn-principal{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 22px;border-radius:8px;
  background:var(--verde);color:#fff;
  font-size:15px;font-weight:600;border:0;cursor:pointer;
  transition:background .15s;
}
.btn-principal:hover{background:var(--verde-osc)}
.btn-principal:active{transform:translateY(1px)}

/* ════════ TRÁMITES ════════ */

/* Lista de ítems (documentos / providencias) */
.lista-tramites{display:grid;gap:10px}
.item-tramite{
  background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--radio);padding:16px 20px;
  display:flex;align-items:center;gap:16px;
  box-shadow:var(--sombra);transition:border-color .15s;
}
.item-tramite:hover{border-color:var(--lima)}
.item-tramite .icono-item{
  width:42px;height:42px;border-radius:9px;flex-shrink:0;
  background:var(--verde-tinte);color:var(--verde);
  display:grid;place-items:center;font-size:18px;
}
.item-tramite .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.item-tramite .info strong{font-size:15px;font-weight:600;line-height:1.3}
.item-tramite .info span{font-size:13px;color:var(--gris)}
.item-tramite .meta{display:flex;align-items:center;gap:12px;flex-shrink:0;flex-wrap:wrap}

/* Filtro de año */
.filtro-año{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:20px;
}
.filtro-año select{
  padding:8px 12px;border:1.5px solid var(--linea);border-radius:8px;
  font:inherit;font-size:15px;background:var(--blanco);color:var(--tinta);
  transition:border-color .15s;
}
.filtro-año select:focus{outline:none;border-color:var(--verde)}

/* Visor PDF embebido */
.visor-pdf{
  display:block;width:100%;height:600px;
  border:0;background:var(--papel);
}

/* Acciones de firma */
.acciones-firma{
  display:flex;flex-wrap:wrap;gap:12px;
  padding:20px 0;border-top:1px solid var(--linea);margin-top:20px;
}

/* Botón de rechazo */
.btn-rechazar{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 22px;border-radius:8px;
  background:var(--rojo);color:#fff;
  font-size:15px;font-weight:600;border:0;cursor:pointer;
  transition:background .15s;
}
.btn-rechazar:hover{background:#a62f24}
.btn-rechazar:active{transform:translateY(1px)}

/* Botón volver (acciones de firma) */
.btn-volver{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:8px;
  background:var(--blanco);color:var(--gris);
  font-size:14px;font-weight:600;border:1.5px solid var(--linea);
  text-decoration:none;cursor:pointer;transition:background .15s,color .15s;
  margin-left:auto;
}
.btn-volver:hover{background:var(--papel);color:var(--tinta)}

/* Panel de rechazo inline */
.panel-rechazo{
  background:var(--rojo-tinte);border:1px solid var(--rojo);
  border-radius:var(--radio);padding:20px;margin-top:4px;
}

/* Animación modal */
@keyframes modal-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* Paginación */
.paginacion{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-top:20px;flex-wrap:wrap;
}
.pag-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:8px;font-size:14px;font-weight:600;
  border:1.5px solid var(--linea);background:var(--blanco);color:var(--tinta);
  text-decoration:none;transition:border-color .15s,color .15s;
}
.pag-btn:hover{border-color:var(--verde);color:var(--verde)}
.pag-btn--dis{color:var(--gris);cursor:default;opacity:.5}
.pag-btn--dis:hover{border-color:var(--linea);color:var(--gris)}
.pag-paginas{display:flex;align-items:center;gap:4px}
.pag-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:8px;font-size:14px;font-weight:600;
  border:1.5px solid var(--linea);background:var(--blanco);color:var(--tinta);
  text-decoration:none;transition:border-color .15s,background .15s,color .15s;
}
.pag-num:hover{border-color:var(--verde);color:var(--verde)}
.pag-num--actual{background:var(--verde);border-color:var(--verde);color:#fff}
.pag-sep{font-size:14px;color:var(--gris);padding:0 4px}