/* ================================================================
   login-huaylas.css  — v4 (paleta gigantografía + responsive fix)
   Municipalidad Provincial de Huaylas - Caraz
   UBICACIÓN: resources-${version}/css/login-huaylas.css
   CARGADO DESDE: login.jspx

   PALETA (extraída de la gigantografía oficial Huaylas-Caraz):
     Azul marino   #0d2461  → fondo panel izquierdo
     Azul medio    #1a3a8a  → hover / gradiente
     Dorado        #c9a227  → acentos, texto em, íconos features
     Dorado suave  #f6eed8  → fondo eyebrow
     Crema         #f5f2eb  → fondo panel derecho (sin cambio)
     Blanco        #ffffff  → texto principal panel izquierdo

   FIX RESPONSIVE:
     - 100% zoom: overflow-y:auto en html/body + flex correcto en #page
     - Celular: logo y texto con flex-shrink:0 + overflow visible
================================================================ */

/* ================================================================
   VARIABLES
================================================================ */
#sgd-login-wrapper{
  --primary:#0d2461;
  --primary-deep:#1a3a8a;
  --primary-light:#2a52a8;
  --accent:#c9a227;
  --accent-soft:#f6eed8;
  --canvas:#f5f2eb;
  --surface:#ffffff;
  --ink:#1a2e1c;
  --ink-soft:#56655b;
  --ink-faint:#8a968d;
  --line:#dee3d6;
  --line-soft:#ebede3;
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --font-ui: system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-disp: Georgia,'Times New Roman',serif;
}

/* ================================================================
   RESET BASE — FIX PROBLEMA 2 (100% zoom desaparece parte inferior)
   Causa: html/body con height:100% fijo no permite scroll cuando
   el contenido supera la pantalla. Se usa min-height + overflow-y:auto
================================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{
  /* FIX: min-height en lugar de height fijo — permite scroll */
  min-height:100%;
  overflow-y:auto;
}
body{
  min-height:100vh;
  font-family:var(--font-ui,system-ui);
  /* CAMBIO: azul marino de la gigantografía reemplaza el verde */
  background:#0d2461;
  display:flex;
  flex-direction:column;
}
/* FIX: #page no debe tener height:100% fijo (Bootstrap lo pone a veces) */
#page{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:100vh;
  /* Anular cualquier padding/margin que ponga Bootstrap o el default.css */
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
}

/* ================================================================
   WRAPPER PRINCIPAL
   FIX: align-items:stretch garantiza que ambos paneles tengan
   la misma altura. Se quita height:100vh fijo del wrapper.
================================================================ */
#sgd-login-wrapper{
  flex:1;
  display:flex;
  align-items:stretch;
  /* FIX: min-height en lugar de height fijo */
  min-height:100vh;
  font-family:var(--font-ui);
  color:var(--ink);
}

/* ================================================================
   PANEL IZQUIERDO — PALETA GIGANTOGRAFÍA
   CAMBIO: azul marino #0d2461 con gradiente radial dorado
   igual al afiche oficial de Huaylas-Caraz
================================================================ */
#sgd-left{
  width:42%;
  /* CAMBIO: fondo azul marino con gradiente dorado sutil */
  background:radial-gradient(
    ellipse at 20% 110%,
    rgba(201,162,39,.25) 0%,
    transparent 55%
  ),
  radial-gradient(
    ellipse at 85% -10%,
    rgba(255,255,255,.06) 0%,
    transparent 50%
  ),
  #0d2461;
  display:flex;
  flex-direction:column;
  padding:50px 48px;
  position:relative;
  /* FIX: overflow visible para que el logo no se corte en celular */
  overflow:hidden;
}

/* Decoración: línea diagonal dorada (como en la gigantografía) */
#sgd-left::before{
  content:'';
  position:absolute;
  bottom:0; right:0;
  width:280px; height:280px;
  background:radial-gradient(
    circle,
    rgba(201,162,39,.18) 0%,
    transparent 65%
  );
  border-radius:50%;
  pointer-events:none;
}
#sgd-left::after{
  content:'';
  position:absolute;
  top:-40px; left:-40px;
  width:220px; height:220px;
  background:radial-gradient(
    circle,
    rgba(255,255,255,.05) 0%,
    transparent 70%
  );
  border-radius:50%;
  pointer-events:none;
}

/* Logo + texto institución */
.sgd-logo-wrap{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:40px;
  position:relative;
  z-index:2;
  /* FIX celular: no encogerse nunca */
  flex-shrink:0;
}
.sgd-logo-img{
  width:76px; height:76px;
  object-fit:contain;
  border-radius:4px;
  flex-shrink:0;
  display:block;
}
.sgd-logo-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.sgd-logo-text span.mun{
  /* CAMBIO: dorado de la gigantografía */
  color:#c9a227;
  font-size:9px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
}
.sgd-logo-text span.nombre{
  color:#fff;
  font-size:15px; font-weight:700;
  line-height:1.25;
}
.sgd-logo-text span.prov{
  color:rgba(255,255,255,.6);
  font-size:10px;
  letter-spacing:.06em; text-transform:uppercase;
}

/* Hero */
.sgd-hero{
  position:relative; z-index:2;
  flex:1;
  /* FIX: min-height:0 permite que flex:1 funcione correctamente */
  min-height:0;
}
.sgd-tagline{
  color:#fff;
  font-family:var(--font-disp,Georgia);
  font-size:30px; font-weight:500;
  line-height:1.22;
  margin-bottom:16px;
  max-width:320px;
}
/* CAMBIO: dorado de la gigantografía para el énfasis */
.sgd-tagline em{color:#c9a227; font-style:normal}
.sgd-desc{
  color:rgba(255,255,255,.72);
  font-size:14px; line-height:1.65;
  margin-bottom:32px; max-width:320px;
}

/* Lista de beneficios */
.sgd-features{display:flex; flex-direction:column; gap:14px}
.sgd-feat{
  display:flex; align-items:center; gap:14px;
  color:rgba(255,255,255,.88); font-size:13.5px;
}
.sgd-feat-icon{
  width:32px; height:32px;
  border-radius:9px; flex-shrink:0;
  /* CAMBIO: dorado transparente igual que la gigantografía */
  background:rgba(201,162,39,.2);
  border:1px solid rgba(201,162,39,.35);
  display:flex; align-items:center; justify-content:center;
  color:#c9a227;
}
.sgd-feat-icon svg{width:16px; height:16px}

/* Pie izquierdo */
.sgd-footer-left{
  color:rgba(255,255,255,.35);
  font-size:11px;
  margin-top:40px;
  position:relative; z-index:2;
}

/* ================================================================
   PANEL DERECHO — formulario
================================================================ */
#sgd-right{
  flex:1;
  background:var(--canvas);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 56px;
  /* FIX: overflow-y:auto para que el formulario sea scrollable
     si la pantalla es muy pequeña verticalmente */
  overflow-y:auto;
}
.sgd-form-box{width:100%; max-width:420px}

/* Eyebrow "Acceso al sistema" */
.sgd-eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:700;
  letter-spacing:.8px; text-transform:uppercase;
  /* CAMBIO: dorado de la gigantografía */
  color:var(--accent);
  background:var(--accent-soft);
  padding:5px 12px; border-radius:999px;
  margin-bottom:18px;
}
.sgd-eyebrow svg{width:13px; height:13px; stroke:currentColor}

.sgd-bienvenido{
  font-family:var(--font-disp,Georgia);
  font-weight:500; font-size:30px;
  margin:0 0 6px; color:var(--ink);
}
.sgd-subtitle{color:var(--ink-soft); font-size:14px; margin:0 0 26px}

/* ================================================================
   CAMPOS DEL FORMULARIO
================================================================ */
.sgd-field{margin-bottom:16px}
.sgd-label{
  display:block; font-size:13px; font-weight:600;
  color:var(--ink-soft); margin-bottom:7px;
}
.sgd-inp{
  position:relative; display:flex; align-items:center;
}
.sgd-ic-lead{
  position:absolute; left:14px;
  top:50%; transform:translateY(-50%);
  width:18px; height:18px;
  color:var(--ink-faint); pointer-events:none;
  stroke:currentColor; fill:none; flex-shrink:0;
}
.sgd-inp-field{
  width:100%;
  font-family:var(--font-ui); font-size:15px;
  color:var(--ink); background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--r-md);
  padding:13px 14px 13px 42px;
  transition:border-color .18s, box-shadow .18s;
  -webkit-appearance:none; appearance:none;
  box-sizing:border-box;
  line-height:normal; vertical-align:middle;
}
.sgd-inp-field::placeholder{color:var(--ink-faint)}
.sgd-inp-field:focus{
  outline:none;
  /* CAMBIO: borde azul marino en foco */
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(13,36,97,.1);
}
.sgd-inp-field[readonly]{
  background:var(--canvas); color:var(--ink-soft);
}

/* Botón ojo contraseña */
.sgd-eye{
  position:absolute; right:8px;
  width:34px; height:34px;
  border:none; background:none; cursor:pointer;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-faint);
}
.sgd-eye:hover{
  background:rgba(13,36,97,.07);
  color:var(--primary);
}
.sgd-eye svg{width:18px; height:18px; stroke:currentColor; fill:none}

/* Botón refresh Dependencia */
.sgd-dep-btn{
  position:absolute; right:0;
  width:46px; height:100%;
  border:none;
  border-left:1.5px solid var(--line);
  background:var(--surface);
  border-radius:0 var(--r-md) var(--r-md) 0;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); cursor:pointer; transition:.18s;
}
.sgd-dep-btn:hover{background:rgba(13,36,97,.05); color:var(--primary)}
.sgd-dep-btn svg{width:18px; height:18px; stroke:currentColor; fill:none}
.sgd-inp .sgd-inp-field[readonly]{padding-right:52px}

/* ================================================================
   CAPTCHA — estilo UNAS (lv2-cap-*)
================================================================ */
.lv2-cap-row{
  display:flex; gap:10px;
  align-items:stretch; flex-wrap:wrap;
}
.lv2-cap-box{
  flex:none;
  border-radius:var(--r-md);
  border:1.5px solid var(--line);
  overflow:hidden;
  background:var(--surface);
  display:flex; align-items:center; justify-content:center;
}
.lv2-cap-box img{display:block; height:54px; width:auto}
.lv2-cap-refresh{
  flex:none; width:46px;
  border:1.5px solid var(--line);
  background:var(--surface);
  border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); cursor:pointer; transition:.18s;
}
.lv2-cap-refresh:hover{
  background:rgba(13,36,97,.05);
  color:var(--primary);
  border-color:rgba(13,36,97,.2);
}
.lv2-cap-refresh svg{stroke:currentColor; fill:none}
.lv2-inp{position:relative; display:flex; align-items:center}
.lv2-inp .sgd-inp-field{border-radius:var(--r-md)}

/* ================================================================
   BOTÓN INGRESAR
================================================================ */
#sgd-btn-ingresar{
  width:100%;
  display:flex; align-items:center; justify-content:center;
  gap:10px; border:none; cursor:pointer;
  /* CAMBIO: azul marino de la gigantografía */
  background:var(--primary);
  color:#fff;
  font-family:var(--font-ui); font-size:15.5px; font-weight:600;
  padding:14px; border-radius:var(--r-md);
  margin-top:6px;
  transition:transform .15s, background .18s, box-shadow .18s;
  box-shadow:0 1px 3px rgba(13,36,97,.2);
}
#sgd-btn-ingresar:hover{
  background:var(--primary-deep);
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(13,36,97,.22);
}
#sgd-btn-ingresar:active{transform:translateY(0)}
#sgd-btn-ingresar svg{width:18px; height:18px; stroke:currentColor; fill:none}

/* Links inferiores */
.sgd-links-row{
  display:flex; flex-wrap:wrap; gap:8px 18px;
  margin-top:26px; padding-top:20px;
  border-top:1px solid var(--line);
}
.sgd-links-row a{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; color:var(--ink-soft); font-weight:500;
  text-decoration:none; transition:.15s;
}
.sgd-links-row a:hover{color:var(--primary)}
.sgd-links-row a .glyphicon{font-size:12px; color:var(--accent)}

/* Mensajes de error */
.sgd-messages{margin-top:18px}
.sgd-messages:empty{margin:0}

/* ================================================================
   RESPONSIVE
   FIX PROBLEMA 2: 100% zoom → el formulario desaparece abajo
   FIX PROBLEMA 3: celular → logo cortado a la mitad
================================================================ */

/* ---- TABLET (max 860px) ---- */
@media(max-width:860px){
  #sgd-login-wrapper{
    flex-direction:column;
    /* FIX: min-height en lugar de height fijo */
    min-height:100vh;
    height:auto;
  }
  #sgd-left{
    width:100%;
    /* Altura automática — NO forzar altura fija */
    height:auto;
    flex:none;
    padding:24px 28px;
    flex-direction:row;
    align-items:center;
    gap:16px;
    /* FIX: overflow visible para no cortar el logo */
    overflow:visible;
  }
  /* Hero se oculta en tablet para ahorrar espacio */
  .sgd-hero{display:none}
  .sgd-footer-left{display:none}

  /* Logo siempre visible */
  .sgd-logo-wrap{
    margin-bottom:0 !important;
    flex-shrink:0 !important;
    display:flex !important;
    align-items:center;
  }
  .sgd-logo-img{
    width:58px; height:58px;
    display:block !important;
    flex-shrink:0 !important;
  }
  .sgd-logo-text{display:flex !important}
  .sgd-logo-text span.nombre{font-size:13px; display:block !important}
  .sgd-logo-text span.mun{font-size:8px; display:block !important}
  .sgd-logo-text span.prov{font-size:8px; display:block !important}

  /* Panel derecho ocupa el resto */
  #sgd-right{
    flex:1;
    padding:32px 28px;
    /* FIX: overflow-y:auto para scroll si el contenido no cabe */
    overflow-y:auto;
    /* FIX: align-items flex-start para que el form empiece arriba */
    align-items:flex-start;
  }
}

/* ---- CELULAR (max 520px) ---- */
@media(max-width:520px){
  #sgd-left{
    padding:12px 16px;
    flex-direction:row;
    align-items:center;
    gap:10px;
    /* FIX PROBLEMA 3: NO overflow:hidden — causaba el logo cortado */
    overflow:visible !important;
    /* Altura mínima fija para que el logo no se comprima */
    min-height:72px;
    flex:none;
  }

  /* FIX PROBLEMA 3: logo NO encoge, NO se corta */
  .sgd-logo-wrap{
    flex-shrink:0 !important;
    margin-bottom:0 !important;
    display:flex !important;
    align-items:center;
    gap:10px;
    /* Ancho fijo para evitar compresión */
    min-width:0;
  }
  .sgd-logo-img{
    /* Tamaño fijo — no encoge con flex */
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    display:block !important;
    flex-shrink:0 !important;
    overflow:visible !important;
  }
  .sgd-logo-text{
    display:flex !important;
    flex-direction:column;
    min-width:0;
    /* Permite que el texto se trunce si es muy largo */
    overflow:hidden;
  }
  .sgd-logo-text span.nombre{
    font-size:11px;
    display:block !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .sgd-logo-text span.mun{
    font-size:7px;
    display:block !important;
    white-space:nowrap;
  }
  .sgd-logo-text span.prov{
    font-size:7px;
    display:block !important;
    white-space:nowrap;
  }
  .sgd-hero{display:none !important}
  .sgd-footer-left{display:none !important}

  /* Panel derecho: scroll propio en celular */
  #sgd-right{
    padding:20px 14px;
    align-items:flex-start;
    overflow-y:auto;
  }
  .sgd-bienvenido{font-size:24px}
  .sgd-links-row{gap:8px 10px}
  /* Captcha apilado verticalmente en celular muy pequeño */
  .lv2-cap-row{flex-direction:column}
  .lv2-cap-box, .lv2-cap-refresh{flex:none}
}

/* ---- PANTALLAS MUY PEQUEÑAS (max 380px) ---- */
@media(max-width:380px){
  .sgd-logo-img{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
  }
  .sgd-logo-text span.nombre{font-size:10px !important}
  .sgd-logo-text span.mun{font-size:6px !important}
  .sgd-logo-text span.prov{display:none !important}
  #sgd-right{padding:16px 12px}
}

/* ================================================================
   MODALES (Cambiar Contraseña y Requisitos del Sistema)
   CAMBIO: cabecera azul marino reemplaza verde anterior
================================================================ */
.cuadrow .panel-heading,
#dragmodal{
  /* CAMBIO: azul marino de la gigantografía */
  background:#0d2461 !important;
  border-color:#0a1a4a !important;
  color:#fff !important;
}
.cuadrow .panel-title,
#dragmodal .panel-title{color:#fff !important}
.cuadrow .panel-heading .close,
.cuadrow .panel-heading a{
  color:#fff !important; opacity:.92; text-shadow:none !important;
}
.cuadrow{
  position:fixed; top:64px; left:0; right:0;
  margin-left:auto; margin-right:auto;
  z-index:100000; max-width:96vw;
}