/* =========================================================================
   SICOP — pantalla de ingreso.

   Es una página aparte: no carga el layout (chrome.php) ni Bootstrap, así que
   tiene su propia hoja en vez de ir en sicop.css. Usa los tokens del Design
   System (assets/css/ds/shell.min.css, que se enlaza antes).

   Siempre va en claro: no hay cambio de tema en esta pantalla.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body             { height: 100%; }
body                   { font-family: var(--gm-font); display: flex; min-height: 100vh; }


/* -------------------------------------------------------------------------
   Panel de marca (izquierda)
   ------------------------------------------------------------------------- */

.lp-left { width: 420px; flex-shrink: 0; background: var(--brand); display: flex; flex-direction: column; justify-content: space-between; padding: 48px 44px; position: relative; overflow: hidden; }

/* Aros decorativos */
.lp-left::before { content: ''; position: absolute; width: 380px; height: 380px; border: 70px solid rgba(255,255,255,.05); border-radius: 50%; bottom: -120px; right: -120px; pointer-events: none; }
.lp-left::after  { content: ''; position: absolute; width: 220px; height: 220px; border: 45px solid rgba(255,255,255,.04); border-radius: 50%; top: -60px; left: -60px; pointer-events: none; }
.lp-ring2        { position: absolute; width: 160px; height: 160px; border: 30px solid rgba(255,255,255,.06); border-radius: 50%; top: 38%; right: -40px; pointer-events: none; }

.lp-brand    { position: relative; z-index: 1; }
.lp-logo-img { height: 60px; width: auto; display: block; margin-bottom: 36px; }
.lp-title    { font-size: 26px; font-weight: 700; color: #fff; line-height: 1.25; margin-bottom: 12px; }
.lp-subtitle { font-size: 13.5px; color: rgba(255,255,255,.6); line-height: 1.65; max-width: 290px; }

.lp-features     { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.lp-feature      { display: flex; align-items: center; gap: 13px; color: rgba(255,255,255,.78); font-size: 13px; }
.lp-feature-icon { width: 34px; height: 34px; flex-shrink: 0; background: rgba(255,255,255,.1); border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.lp-copy         { position: relative; z-index: 1; font-size: 11px; color: rgba(255,255,255,.3); }


/* -------------------------------------------------------------------------
   Formulario (derecha)
   ------------------------------------------------------------------------- */

.lp-right        { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 28px; background: #f5f7fb; overflow-y: auto; }
.lp-form-box     { width: 100%; max-width: 390px; }
.lp-form-heading { margin-bottom: 30px; }
.lp-form-title   { font-size: 22px; font-weight: 700; color: #111827; margin-bottom: 5px; }
.lp-form-sub     { font-size: 13px; color: #6b7280; }

.lf-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.lf-label { font-size: 13px; font-weight: 500; color: #374151; }
.lf-wrap  { position: relative; }
.lf-icon  { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #9ca3af; pointer-events: none; }

.lf-input              { width: 100%; padding: 10px 12px 10px 38px; border: 1.5px solid #e5e7eb; border-radius: 8px; font-size: 14px; font-family: inherit; color: #111827; background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
.lf-input:focus        { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(1,52,131,.1); }
.lf-input::placeholder { color: #c4c9d4; }

.lf-pw-btn       { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #9ca3af; cursor: pointer; padding: 4px; display: flex; align-items: center; }
.lf-pw-btn:hover { color: #6b7280; }

.lf-alert { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; border-radius: 8px; padding: 10px 14px; font-size: 13px; display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }

.lf-submit        { width: 100%; padding: 11px 20px; margin-top: 6px; background: var(--brand); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s, transform .1s; }
.lf-submit:hover  { background: #012a6a; }
.lf-submit:active { transform: scale(.98); }

.lf-footer           { margin-top: 22px; text-align: center; font-size: 12px; color: #9ca3af; }
.lf-footer a         { color: var(--brand); font-weight: 500; text-decoration: none; }
.lf-footer a:hover   { text-decoration: underline; }


/* -------------------------------------------------------------------------
   Teléfono: el panel de marca se achica y pierde la lista de funciones
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
  body         { flex-direction: column; }
  .lp-left     { width: 100%; padding: 28px 24px 24px; flex-shrink: 0; }
  .lp-left .lp-features,
  .lp-left .lp-copy { display: none; }
  .lp-logo-img { height: 38px; margin-bottom: 18px; }
  .lp-title    { font-size: 18px; margin-bottom: 6px; }
  .lp-subtitle { font-size: 12px; }
  .lp-right    { background: #fff; }
}