/* ============================================================================
   ARCHIVO GENERADO · NO SE EDITA A MANO
   ---------------------------------------------------------------------------
   Lo produce  npm run build  recortando assets/css/estilos.css.
   Es el bloque html.pg-ingreso tal cual, para index.php.

   Para cambiar un estilo, edite assets/css/estilos.css —el archivo único,
   donde están las cinco páginas— y vuelva a construir.
   ============================================================================ */

/* =============================================================================
   2 · MAQUETA DE INGRESO · index.html
   -----------------------------------------------------------------------------
   Presentación, gráfico de control y las pestañas Ingreso · Registro · Recuperar.
   Origen: los <style> que estaban dentro de index.html
   ============================================================================= */

  html.pg-ingreso{
    --blue:#4292C3; --blue-dk:#357DAB; --navy:#0A2554;
    --ink:#16233B; --muted:#69748A; --line:#DCE3EC; --soft:#F2F7FB;
  }
  html.pg-ingreso *{box-sizing:border-box;margin:0;padding:0}
  html.pg-ingreso body{
    font-family:'Inter',system-ui,sans-serif;color:#16233B;color:var(--ink);-webkit-font-smoothing:antialiased;
    background:#E8EDF3;display:flex;justify-content:center;min-height:100vh;
  }
  html.pg-ingreso img{max-width:100%;height:auto}

  html.pg-ingreso .shell{
    display:flex;width:100%;max-width:1200px;min-height:100vh;background:#fff;
    box-shadow:0 0 0 1px rgba(10,37,84,.06), 0 0 60px -20px rgba(10,37,84,.18);
  }

  /* ===== IZQUIERDA ===== */
  html.pg-ingreso .brand{
    flex:1 1 54%;background:#F2F7FB;background:var(--soft);
    padding:52px 60px;display:flex;flex-direction:column;justify-content:space-between;
    position:relative;overflow:hidden;border-right:1px solid #DCE3EC;border-right:1px solid var(--line);
  }
  html.pg-ingreso .scale{position:absolute;left:0;top:0;bottom:0;width:46px;border-right:1px solid #DCE3EC;border-right:1px solid var(--line);background:#fff}
  html.pg-ingreso .scale i{position:absolute;right:0;height:1px;background:#C9D6E3}
  html.pg-ingreso .scale i.mj{background:#4292C3;background:var(--blue);opacity:.55}

  html.pg-ingreso .logo{position:relative;z-index:2;margin-left:22px;display:flex;justify-content:center;
    padding-bottom:22px;border-bottom:1px solid #DCE3EC;border-bottom:1px solid var(--line)}
  html.pg-ingreso .logo img{width:clamp(210px,26vw,300px);height:auto}

  html.pg-ingreso .copy{position:relative;z-index:2;max-width:480px;margin-left:22px}
  html.pg-ingreso .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;
    text-transform:uppercase;color:#357DAB;color:var(--blue-dk);margin-bottom:18px}
  html.pg-ingreso .copy h1{font-size:clamp(26px,2.5vw,34px);line-height:1.2;font-weight:600;
    letter-spacing:-.015em;margin-bottom:22px;color:#0A2554;color:var(--navy)}

  html.pg-ingreso .feats{list-style:none;margin:0 0 22px;padding:0;max-width:440px}
  html.pg-ingreso .feats li{display:flex;align-items:flex-start;gap:11px;
    font-size:14.5px;line-height:1.5;color:#4A576B;margin-bottom:11px}
  html.pg-ingreso .feats svg{flex:none;width:15px;height:15px;margin-top:3px;stroke:#4292C3;stroke:var(--blue);stroke-width:2.4;fill:none}

  /* carta de control */
  html.pg-ingreso .chart-card{max-width:440px;margin:0 0 22px;background:#fff;border:1px solid #DCE3EC;border:1px solid var(--line);
    border-radius:9px;padding:13px 14px 11px;
    box-shadow:0 1px 2px rgba(10,37,84,.04),0 8px 20px -12px rgba(10,37,84,.14)}
  html.pg-ingreso .chart-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
  html.pg-ingreso .chart-head b{font-size:12px;font-weight:600;color:#0A2554;color:var(--navy)}
  html.pg-ingreso .chart-badge{display:inline-flex;align-items:center;gap:4px;flex:none;
    font-family:'IBM Plex Mono',monospace;font-size:9px;color:#C0392B;background:#FDECEA;
    border:1px solid #F6D4D0;padding:2px 7px;border-radius:20px}
  html.pg-ingreso .chart-sub{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:#69748A;color:var(--muted);
    margin-bottom:6px;letter-spacing:.02em}
  html.pg-ingreso .chart-card svg{display:block;width:100%;height:auto}
  html.pg-ingreso .ax{font-family:'IBM Plex Mono',monospace;font-size:6.5px;fill:#8C97A8}
  html.pg-ingreso .lim{font-family:'IBM Plex Mono',monospace;font-size:6.5px;fill:#8C97A8}
  html.pg-ingreso .yttl{font-family:'Inter',sans-serif;font-size:6.5px;fill:#8C97A8}

  html.pg-ingreso .hilite{border-left:3px solid #4292C3;border-left:3px solid var(--blue);padding:6px 0 6px 16px;max-width:440px}
  html.pg-ingreso .hilite p{font-size:clamp(17px,1.5vw,20px);line-height:1.4;font-weight:500;
    color:#0A2554;
    color:var(--navy);letter-spacing:-.005em}
  html.pg-ingreso .hilite b{font-weight:700;color:#357DAB;color:var(--blue-dk)}

  html.pg-ingreso .creds{position:relative;z-index:2;display:flex;gap:32px;padding-top:24px;
    margin-left:22px;border-top:1px solid #DCE3EC;border-top:1px solid var(--line)}
  html.pg-ingreso .creds .k{font-family:'IBM Plex Mono',monospace;font-size:13px;color:#0A2554;color:var(--navy);font-weight:500}
  html.pg-ingreso .creds .v{font-size:11px;color:#69748A;color:var(--muted);margin-top:4px}
  /* una marca puede dejar sin segunda línea alguna credencial (ver 'textos'
     en config.php): si va vacía no debe ocupar sitio */
  html.pg-ingreso .creds .v:empty{display:none}
  /* aviso con lo que responde el servidor (ingreso, registro, recuperación) */
  html.pg-ingreso .apiaviso{margin:0 0 12px;padding:9px 12px;border-radius:8px;
    font-size:12.5px;line-height:1.45;position:relative;overflow:hidden;
    transition:opacity .28s ease;
    background:rgba(220,60,50,.12);border:1px solid rgba(220,60,50,.35);color:#ffd9d5}
  html.pg-ingreso .apiaviso--ok{background:rgba(45,170,95,.14);
    border-color:rgba(45,170,95,.40);color:#c8f0d6}
  /* los avisos se van solos a los AVISO_SEGUNDOS de config.php —los errores y
     también los de acierto de Registro y Recuperar—: esto es el desvanecido y
     la barrita que se vacía, para que se vea venir */
  html.pg-ingreso .apiaviso--yendo{opacity:0}
  html.pg-ingreso .apiaviso__barra{position:absolute;left:0;bottom:0;
    height:2px;width:100%;background:rgba(255,150,140,.75);
    transform-origin:left center;
    animation-name:apiaviso-barra;animation-timing-function:linear;
    animation-fill-mode:forwards}
  /* en un mensaje de acierto la barrita va en verde: una línea roja bajo un
     recuadro verde se lee como que algo salió mal */
  html.pg-ingreso .apiaviso--ok .apiaviso__barra{background:rgba(150,230,175,.75)}
  @keyframes apiaviso-barra{from{transform:scaleX(1)}to{transform:scaleX(0)}}

  /* ===== DERECHA ===== */
  html.pg-ingreso .panel{flex:1 1 46%;background-color:#0A2554;background-color:var(--navy);
    background-image:radial-gradient(circle at 70% 20%,rgba(66,146,195,.30) 0%,transparent 58%);
    display:flex;flex-direction:column;padding:28px 40px 30px;color:#fff}
  html.pg-ingreso .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
  html.pg-ingreso .compliance{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;letter-spacing:.03em;color:#B9C7DA;background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:5px 11px;white-space:nowrap}
  html.pg-ingreso .compliance svg{flex:none;width:11px;height:11px;stroke:#7FB6DC;stroke-width:2.4;fill:none}
  html.pg-ingreso .lang{appearance:none;border:1px solid rgba(255,255,255,.18);border-radius:6px;
    padding:7px 30px 7px 11px;font:500 13px 'Inter';color:#B9C7DA;cursor:pointer;
    background:rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B9C7DA' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center}
  html.pg-ingreso .lang option{color:#16233B}

  html.pg-ingreso .wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:18px 0}
  html.pg-ingreso .box{width:100%;max-width:380px}

  html.pg-ingreso .tabs{display:flex;gap:4px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:26px}
  html.pg-ingreso .tab{flex:1;background:none;border:0;cursor:pointer;padding:11px 4px 12px;position:relative;
    font:600 12px 'Inter';letter-spacing:.09em;text-transform:uppercase;color:#8397B2;transition:color .16s}
  html.pg-ingreso .tab:hover{color:#C6D6E8}
  html.pg-ingreso .tab[aria-selected="true"]{color:#fff}
  html.pg-ingreso .tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
    height:2px;background:#4292C3;background:var(--blue);border-radius:2px}
  html.pg-ingreso .tab:focus-visible{outline:2px solid #4292C3;outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}

  html.pg-ingreso .pane{display:none}
  html.pg-ingreso .pane.on{display:block;animation:fade .22s ease}
  @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

  html.pg-ingreso .lead{font-size:14px;color:#93A5BE;margin-bottom:24px;line-height:1.5}
  html.pg-ingreso .f{margin-bottom:16px}
  html.pg-ingreso .f label{display:block;font-size:13px;font-weight:500;margin-bottom:7px;color:#C6D3E3}
  html.pg-ingreso .f input{width:100%;padding:12px 13px;border:1px solid rgba(255,255,255,.16);border-radius:7px;
    background:rgba(255,255,255,.06);color:#fff;font:400 14.5px 'Inter';transition:.15s}
  html.pg-ingreso .f input::placeholder{color:#6E809A}
  html.pg-ingreso .f input:focus{outline:none;border-color:#4292C3;border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(66,146,195,.20);background:rgba(255,255,255,.10)}

  /* validacion de campos obligatorios */
  html.pg-ingreso .f .err{display:flex;align-items:center;gap:6px;margin:7px 0 0;
    font-size:12.5px;line-height:1.4;color:#F2A0A0}
  html.pg-ingreso .f .err[hidden]{display:none}
  html.pg-ingreso .f .err span[hidden]{display:none}
  html.pg-ingreso .f .err svg{width:14px;height:14px;flex:none;fill:none;stroke:#F2A0A0;stroke-width:1.8;
    stroke-linecap:round}
  html.pg-ingreso .f.bad input{border-color:#D9645E;background:rgba(217,100,94,.10)}
  html.pg-ingreso .f.bad input:focus{border-color:#D9645E;box-shadow:0 0 0 3px rgba(217,100,94,.22)}

  html.pg-ingreso .row{display:flex;justify-content:space-between;align-items:center;margin:4px 0 20px}
  html.pg-ingreso .ck{display:flex;align-items:center;gap:7px;font-size:13px;color:#93A5BE;cursor:pointer}
  html.pg-ingreso .ck input{accent-color:#4292C3;accent-color:var(--blue);width:15px;height:15px}
  html.pg-ingreso .lk{font-size:13px;color:#7FB6DC;font-weight:500;text-decoration:none;background:none;
    border:0;cursor:pointer;font-family:'Inter'}
  html.pg-ingreso .lk:hover{text-decoration:underline}

  html.pg-ingreso .btn{width:100%;padding:13px;border:0;border-radius:7px;background:#4292C3;background:var(--blue);
    color:#052042;font:600 14.5px 'Inter';cursor:pointer;transition:.15s;
    box-shadow:0 6px 18px -6px rgba(66,146,195,.55)}
  html.pg-ingreso .btn:hover{filter:brightness(1.08)}
  html.pg-ingreso .btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
  html.pg-ingreso .btn.mt{margin-top:8px}

  html.pg-ingreso .note{font-size:12.5px;color:#7E90AA;margin-top:16px;text-align:center;line-height:1.5}
  html.pg-ingreso .foot{display:flex;justify-content:space-between;font-size:12px;color:#6E809A;padding-top:18px}
  html.pg-ingreso .foot button.lk2{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
  html.pg-ingreso .foot button.lk2:hover{color:#9FB0C7}

  /* ===== TERMINOS DE USO (modal) ===== */
  html.pg-ingreso .tos-overlay{position:fixed;inset:0;background:rgba(10,37,84,.55);display:none;
    align-items:center;justify-content:center;padding:24px;z-index:100}
  html.pg-ingreso .tos-overlay.on{display:flex}
  html.pg-ingreso .tos-modal{background:#fff;border-radius:12px;max-width:720px;width:100%;max-height:85vh;
    display:flex;flex-direction:column;box-shadow:0 20px 60px -20px rgba(10,37,84,.4)}
  html.pg-ingreso .tos-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;
    border-bottom:1px solid #DCE3EC;
    border-bottom:1px solid var(--line);flex:none}
  html.pg-ingreso .tos-head span{font:600 15px 'Inter';color:#0A2554;color:var(--navy)}
  html.pg-ingreso .tos-close{background:none;border:0;font-size:22px;line-height:1;color:#69748A;color:var(--muted);cursor:pointer;padding:2px 6px}
  html.pg-ingreso .tos-close:hover{color:#16233B;color:var(--ink)}
  html.pg-ingreso .tos-body{padding:20px 22px 26px;overflow-y:auto;color:#16233B;color:var(--ink);font-size:13.5px;line-height:1.6}
  html.pg-ingreso .tos-body h3{font-size:14.5px;color:#0A2554;color:var(--navy);margin:20px 0 8px}
  html.pg-ingreso .tos-body h3:first-child{margin-top:0}
  html.pg-ingreso .tos-body h4{font-size:13px;color:#357DAB;color:var(--blue-dk);margin:14px 0 6px}
  html.pg-ingreso .tos-body p{margin-bottom:10px}
  html.pg-ingreso .tos-body ul{margin:0 0 10px 20px}
  html.pg-ingreso .tos-body li{margin-bottom:5px}
  html.pg-ingreso .tos-body .tos-title{font:700 15.5px 'Inter';color:#0A2554;color:var(--navy);margin-bottom:14px}
  html.pg-ingreso .tos-body .tos-ack{margin-top:18px;padding-top:14px;border-top:1px solid #DCE3EC;border-top:1px solid var(--line);font-weight:500}
  @media (max-width:520px){ html.pg-ingreso .tos-modal{max-height:92vh} html.pg-ingreso .tos-body{padding:16px 16px 20px} }

  /* ===== RESPONSIVE ===== */
  @media (max-width:1050px){
    html.pg-ingreso .brand{padding:40px 40px}
    html.pg-ingreso .panel{padding:26px 32px 28px}
  }
  @media (max-width:900px){
    html.pg-ingreso body{background:#fff;display:block}
    html.pg-ingreso .shell{flex-direction:column;min-height:100dvh;max-width:none;box-shadow:none}
    html.pg-ingreso .panel{order:1}
    html.pg-ingreso .brand{order:2;flex:none;padding:26px 22px 24px;border-right:0;border-top:1px solid #DCE3EC;border-top:1px solid var(--line);
      border-bottom:0;justify-content:flex-start;gap:18px}
    html.pg-ingreso .scale{display:none}
    html.pg-ingreso .logo{margin-left:0;padding-bottom:16px}
    html.pg-ingreso .logo img{width:min(230px,72%)}
    html.pg-ingreso .copy{margin-left:0;max-width:100%;text-align:center}
    html.pg-ingreso .eyebrow{margin-bottom:10px}
    html.pg-ingreso .copy h1{font-size:clamp(21px,5.6vw,28px);margin-bottom:16px;text-wrap:balance}
    html.pg-ingreso .feats{max-width:380px;margin:0 auto 16px;text-align:left}
    html.pg-ingreso .feats li{font-size:14px;margin-bottom:9px}
    html.pg-ingreso .chart-card{max-width:380px;margin:0 auto 18px}
    html.pg-ingreso .hilite{border-left:0;border-top:1px solid #DCE3EC;border-top:1px solid var(--line);padding:14px 0 0;
      margin:0 auto;max-width:400px;text-align:center}
    html.pg-ingreso .hilite p{font-size:16px}
    html.pg-ingreso .creds{margin-left:0;gap:14px 22px;flex-wrap:wrap;justify-content:center;padding-top:16px}
    html.pg-ingreso .creds .k{font-size:12px}
    html.pg-ingreso .creds .v{font-size:10.5px}
    html.pg-ingreso .panel{flex:1;padding:22px 22px 26px;
      background-image:radial-gradient(circle at 50% 0%,rgba(66,146,195,.28) 0%,transparent 62%)}
    html.pg-ingreso .box{max-width:420px}
    html.pg-ingreso .wrap{padding:14px 0}
  }
  @media (max-width:520px){
    html.pg-ingreso .brand{padding:22px 18px 20px;gap:14px}
    html.pg-ingreso .logo img{width:min(200px,74%)}
    html.pg-ingreso .copy h1{font-size:clamp(20px,6.2vw,25px)}
    html.pg-ingreso .feats li{font-size:13.5px;gap:9px;margin-bottom:8px}
    html.pg-ingreso .feats svg{width:14px;height:14px}
    html.pg-ingreso .hilite p{font-size:15px}
    html.pg-ingreso .creds{gap:12px 18px}
    html.pg-ingreso .panel{padding:22px 18px 24px}
    html.pg-ingreso .tab{font-size:11px;letter-spacing:.06em;padding:11px 2px 12px}
    html.pg-ingreso .lead{margin-bottom:20px;font-size:13.5px}
    html.pg-ingreso .f input{font-size:16px;padding:13px}
    html.pg-ingreso .btn{padding:14px;font-size:15px}
    html.pg-ingreso .row{flex-wrap:wrap;gap:10px}
  }
  @media (max-width:400px){ html.pg-ingreso .chart-card{display:none} }
  @media (max-height:640px) and (max-width:900px){
    html.pg-ingreso .feats{display:none}
    html.pg-ingreso .chart-card{display:none}
    html.pg-ingreso .brand{gap:10px;padding:16px 18px}
  }

/* ===== Respaldo SOLO para IE10/11 (los navegadores modernos ignoran este bloque) =====
   IE11 no soporta la propiedad gap en flexbox: se recrea con margenes. */
@media all and (-ms-high-contrast:none), (-ms-high-contrast:active){
  html.pg-ingreso .feats li    > * + *{margin-left:11px}
  html.pg-ingreso .chart-head  > * + *{margin-left:8px}
  html.pg-ingreso .chart-badge > * + *{margin-left:4px}
  html.pg-ingreso .creds       > * + *{margin-left:32px}
  html.pg-ingreso .top         > * + *{margin-left:12px}
  html.pg-ingreso .compliance  > * + *{margin-left:6px}
  html.pg-ingreso .tabs        > * + *{margin-left:4px}
  html.pg-ingreso .f .err      > * + *{margin-left:6px}
  html.pg-ingreso .ck          > * + *{margin-left:7px}
  html.pg-ingreso .brand       > * + *{margin-left:18px}
  html.pg-ingreso .row         > * + *{margin-left:10px}
}