/* =============================================================================
   piz-acceso.css — sistema visual de las pantallas FUERA de la aplicación:
   ingresar, SSO, registro de proveedor, activar cuenta, clave temporal y 2FA.

   Autocontenido a propósito: NO depende de assets/css/style.css (que es el
   sistema de la aplicación interna). Así el rediseño del portal no puede
   romper la app ni al revés — son dos sistemas que se tocan solo en la marca.

   Los tokens replican los del portal (acento #b5651d sobre crema #f5f3ee) e
   incluyen modo oscuro por los tres caminos que exige el navegador: preferencia
   del sistema, y las dos marcas explícitas data-theme.
   ============================================================================= */

:root{
  --ac:#b5651d;          /* acento de marca */
  --ac-dk:#9a5518;
  --bg:#f5f3ee;
  --sf:#fff;             /* superficie de tarjeta */
  --sf2:#edeae3;
  --bd:#e2dcd1;
  --bd2:#c9bfae;         /* borde de control */
  --tx:#1b1f23;
  --mu:#6b655a;          /* texto secundario */
  --hero:#f3e6d7;        /* panel izquierdo */
  --ok:#2f7d5b;
  --err:#9f3232;
  --t-ac:#f7e9da;        /* fondos tenues */
  --t-ok:#e2efe8;
  --t-err:#f6e4e4;
  --t-info:#e2e8f0;
  --info:#3d5a80;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ac:#e08a3c; --ac-dk:#f0a257;
    --bg:#1a140d; --sf:#241a10; --sf2:#2e2115;
    --bd:#3f2e1d; --bd2:#5a4430;
    --tx:#f3ece3; --mu:#c2b3a1; --hero:#2a1e12;
    --ok:#6cc79b; --err:#e98b8b;
    --t-ac:#3a2716; --t-ok:#18291f; --t-err:#341b1b; --t-info:#1a2230;
  }
}
:root[data-theme="dark"]{
  --ac:#e08a3c; --ac-dk:#f0a257;
  --bg:#1a140d; --sf:#241a10; --sf2:#2e2115;
  --bd:#3f2e1d; --bd2:#5a4430;
  --tx:#f3ece3; --mu:#c2b3a1; --hero:#2a1e12;
  --ok:#6cc79b; --err:#e98b8b;
  --t-ac:#3a2716; --t-ok:#18291f; --t-err:#341b1b; --t-info:#1a2230;
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--tx);
  font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2{ font-family:'Archivo','Helvetica Neue',Arial,sans-serif; margin:0; letter-spacing:-.02em; line-height:1.1; font-weight:800; text-wrap:balance }
p{ margin:0 }
a{ color:var(--ac) }
:focus-visible{ outline:3px solid var(--ac); outline-offset:3px; border-radius:6px }

/* --- Armazón de dos paneles ------------------------------------------------ */
.ac-page{ min-height:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
/* El admin puede poner el formulario a la izquierda (organizations.login_position) */
.ac-page.form-first{ direction:rtl }
.ac-page.form-first > *{ direction:ltr }

.ac-side{
  background:var(--hero); padding:40px 56px;
  display:flex; flex-direction:column; justify-content:space-between; gap:32px;
}
/* Fondo propio de la organización (organizations.login_bg_path vía /login_bg.php) */
.ac-side.has-bg{
  background-image:linear-gradient(155deg,rgba(36,26,16,.86) 0%,rgba(58,39,22,.86) 100%),url('/login_bg.php');
  background-size:cover; background-position:center; color:#f6efe4;
}
.ac-side.has-bg .ac-brand,
.ac-side.has-bg .ac-side-c h1{ color:#fff }
.ac-side.has-bg .ac-side-c p,
.ac-side.has-bg .ac-side-f a{ color:#d9cdbd }

.ac-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--tx) }
.ac-brand img{ width:42px; height:42px; border-radius:10px }
.ac-brand b{ font-family:'Archivo',Arial,sans-serif; font-size:18px }

.ac-side-c{ max-width:520px }
.ac-side-c .iso{ width:100%; max-width:440px; margin:0 0 28px }
.ac-side-c .iso svg{ width:100%; height:auto; display:block }
.ac-side-c h1{ font-size:clamp(30px,3vw,40px); margin-bottom:14px }
.ac-side-c p{ color:var(--mu); font-size:17px }

.ac-side-f{ display:flex; gap:18px; flex-wrap:wrap; font-size:14px }
.ac-side-f a{ color:var(--mu); text-decoration:none }
.ac-side-f a:hover{ color:var(--ac) }

.ac-main{ display:flex; align-items:center; justify-content:center; padding:40px 28px }
.ac-box{ width:100%; max-width:420px }
.ac-box h2{ font-size:30px; margin-bottom:6px }
.ac-box > p.ac-sub{ color:var(--mu); margin-bottom:28px }

/* --- Controles ------------------------------------------------------------- */
.ac-f{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px }
.ac-f-row{ display:flex; justify-content:space-between; align-items:baseline }
.ac-box label{ font-size:14.5px; font-weight:600 }
.ac-box input[type=text],
.ac-box input[type=email],
.ac-box input[type=password],
.ac-box input[type=tel],
.ac-box select{
  border:1px solid var(--bd2); background:var(--sf); color:var(--tx);
  border-radius:10px; padding:13px 14px; font:inherit; font-size:16px;
  min-height:50px; width:100%;
}
.ac-box input:focus,.ac-box select:focus{
  border-color:var(--ac); outline:none; box-shadow:0 0 0 3px rgba(181,101,29,.15);
}
.ac-box input[readonly]{ background:var(--sf2); color:var(--mu) }

/* Autocompletado del navegador: Chrome pinta el campo de azul con !important y
   se lleva por delante la paleta — se ve peor todavía en modo oscuro, donde
   queda texto claro sobre azul claro. La sombra interior de 1000px es la única
   forma de tapar ese fondo; la transición larga evita el parpadeo azul inicial. */
.ac-box input:-webkit-autofill,
.ac-box input:-webkit-autofill:hover,
.ac-box input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--tx);
  -webkit-box-shadow:0 0 0 1000px var(--sf) inset;
  box-shadow:0 0 0 1000px var(--sf) inset;
  caret-color:var(--tx);
  transition:background-color 9999s ease-out 0s;
}

/* Código de 6 dígitos (2FA) */
.ac-code{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:26px !important;
  letter-spacing:.42em; text-align:center; padding-left:.42em !important }

.ac-pw{ position:relative }
.ac-pw input{ padding-right:52px }
.ac-pw button{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border:none; background:none; color:var(--mu);
  cursor:pointer; border-radius:8px; display:grid; place-items:center;
}
.ac-pw button:hover{ color:var(--ac) }

.ac-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:52px; padding:14px 24px; border-radius:10px;
  font:inherit; font-weight:700; font-size:16px; border:none; cursor:pointer; text-decoration:none;
}
.ac-btn-1{ background:var(--ac); color:#fff; box-shadow:0 12px 26px rgba(181,101,29,.26) }
.ac-btn-1:hover{ background:var(--ac-dk) }
.ac-btn-2{ background:var(--sf); color:var(--tx); border:1.5px solid var(--bd2) }
.ac-btn-2:hover{ border-color:var(--ac); color:var(--ac) }

.ac-or{ display:flex; align-items:center; gap:14px; color:var(--mu); font-size:13.5px; margin:22px 0 }
.ac-or::before,.ac-or::after{ content:""; flex:1; height:1px; background:var(--bd) }

/* --- Avisos ---------------------------------------------------------------- */
.ac-msg{ border-radius:10px; padding:12px 14px; font-size:14.5px; margin-bottom:18px }
.ac-msg-err{ background:var(--t-err); color:var(--err); border:1px solid var(--err) }
.ac-msg-ok{ background:var(--t-ok); color:var(--ok); border:1px solid var(--ok) }
.ac-msg-info{ background:var(--t-ac) }

.ac-hint{ font-size:13.5px; color:var(--mu) }
.ac-hint.ok{ color:var(--ok) }

.ac-note{
  margin-top:26px; background:var(--sf); border:1px solid var(--bd);
  border-radius:14px; padding:16px 18px; font-size:14.5px; color:var(--mu);
}
.ac-note b{ color:var(--tx) }

.ac-link-c{ margin-top:22px; text-align:center; font-size:15px }
.ac-link-c a{ font-weight:700; text-decoration:none }
.ac-link-c a:hover{ text-decoration:underline }

/* --- Caminos alternativos (tarjetas al pie del formulario) ------------------ */
.ac-alt{ margin-top:32px; padding-top:24px; border-top:1px solid var(--bd);
  display:flex; flex-direction:column; gap:14px }
.ac-alt a{
  display:flex; gap:14px; align-items:center; text-decoration:none; color:var(--tx);
  padding:14px 16px; border-radius:14px; background:var(--sf); border:1px solid var(--bd);
  transition:border-color .15s;
}
.ac-alt a:hover{ border-color:var(--ac) }
.ac-alt .ic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex-shrink:0 }
.ac-alt b{ display:block; font-size:15px }
.ac-alt small{ color:var(--mu); font-size:13.5px }
.ac-alt .go{ margin-left:auto; color:var(--ac) }

/* --- Pasos numerados y fichas --------------------------------------------- */
.ac-steps{ display:flex; flex-direction:column; gap:10px; margin:0 0 26px; padding:0; list-style:none }
.ac-steps li{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px }
.ac-steps i{
  font-style:normal; width:24px; height:24px; border-radius:50%;
  background:var(--t-ac); color:var(--ac); font-weight:700; font-size:12.5px;
  display:grid; place-items:center; flex-shrink:0;
}
.ac-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:-6px 0 22px }
.ac-chips span{
  font-size:13px; font-weight:600; padding:6px 12px; border-radius:30px;
  background:var(--sf); border:1px solid var(--bd); color:var(--mu);
}

/* Progreso de un formulario de dos pasos (registro) */
.ac-prog{ display:flex; align-items:center; gap:8px; margin-bottom:20px; font-size:13px; color:var(--mu) }
.ac-prog span{ display:flex; align-items:center; gap:7px }
.ac-prog i{
  font-style:normal; width:22px; height:22px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; font-size:12px; font-weight:700;
  background:var(--sf2); color:var(--mu); border:1px solid var(--bd);
}
.ac-prog .on i{ background:var(--ac); color:#fff; border-color:var(--ac) }
.ac-prog .on{ color:var(--tx); font-weight:600 }
.ac-prog hr{ flex:1; border:none; border-top:1px solid var(--bd); margin:0 }

/* Casilla de términos */
.ac-check{ display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--mu); margin-bottom:20px }
.ac-check input{ margin-top:3px; width:18px; height:18px; flex-shrink:0; accent-color:var(--ac) }
.ac-check a{ font-weight:600 }

/* Color de los iconos de .ac-alt — dos familias, por rol del destino */
.ac-alt .ic-acc{ background:var(--t-ac); color:var(--ac) }
.ac-alt .ic-info{ background:var(--t-info); color:var(--info) }

/* Un secreto que el usuario tiene que copiar a mano (la clave TOTP al emparejar
   el autenticador): monoespaciado, espaciado y seleccionable de un golpe. */
.ac-secret{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:16px;
  letter-spacing:.06em; word-break:break-all; user-select:all; color:var(--tx);
}

/* --- Selector de categorías ------------------------------------------------
   Widget compartido con la aplicación (clases .cat-picker*, su JS vive en
   piz.js). Las pantallas de acceso NO cargan assets/css/style.css, así que las
   reglas visuales viven acá, escritas con los tokens de este archivo. Si alguna
   otra pantalla de acceso necesita el picker, ya lo tiene vestido. */
.cat-picker{ position:relative }
.cat-picker-input{
  width:100%; border:1px solid var(--bd2); background:var(--sf); color:var(--tx);
  border-radius:10px; padding:13px 14px; font:inherit; font-size:16px; min-height:50px;
}
.cat-picker-input:focus{ border-color:var(--ac); outline:none; box-shadow:0 0 0 3px rgba(181,101,29,.15) }
.cat-picker-dropdown{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20; display:none;
  background:var(--sf); border:1px solid var(--bd2); border-radius:10px;
  max-height:230px; overflow-y:auto; box-shadow:0 12px 30px rgba(27,31,35,.16);
}
.cat-picker-dropdown.open{ display:block }
.cat-picker-sector{ padding:8px 12px 3px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mu) }
.cat-picker-option{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:9px 12px; font-size:14.5px; color:var(--tx); cursor:pointer;
}
.cat-picker-option:hover{ background:var(--t-ac); color:var(--ac) }
.cat-picker-option-code{ flex:none; font-size:11.5px; color:var(--mu) }
.cat-picker-empty{ padding:14px 12px; font-size:13.5px; color:var(--mu) }
.cat-picker-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; max-height:120px; overflow-y:auto }
.cat-picker-chip{
  display:inline-flex; align-items:center; gap:6px; padding:5px 7px 5px 11px;
  border-radius:99px; background:var(--t-ac); color:var(--ac); font-size:13px; font-weight:600;
}
.cat-picker-chip button{
  all:unset; display:flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; font-size:13px; line-height:1; cursor:pointer;
}
.cat-picker-chip button:hover{ background:rgba(0,0,0,.12) }

.ac-back{ display:none }

/* --- Angosto -------------------------------------------------------------- */
@media (max-width:900px){
  .ac-page,.ac-page.form-first{ grid-template-columns:minmax(0,1fr); direction:ltr }
  .ac-side{ padding:24px 20px; flex-direction:row; align-items:center; justify-content:space-between }
  .ac-side-c,.ac-side-f{ display:none }
  .ac-back{ display:inline-flex; font-size:14.5px; font-weight:600; text-decoration:none; color:var(--mu) }
  .ac-main{ align-items:flex-start; padding:32px 20px 48px }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important } }

/* ---------------------------------------------------------------------------
   El panel de marca se queda quieto.

   Por qué: la columna derecha cambia de alto todo el rato —verificas el RUC y
   aparece el paso 2, agregas categorías y crecen las fichas—. Como el panel
   izquierdo es una celda de la misma rejilla con el contenido repartido, cada
   cambio de la derecha lo estiraba y su contenido se deslizaba hacia abajo: el
   isométrico y el titular bailaban mientras el usuario llenaba el formulario.

   Anclado con sticky, el panel ocupa la altura de la ventana y se queda donde
   está pase lo que pase al lado. Solo en pantalla ancha: por debajo de 900px el
   diseño ya es de una columna y el panel pasa a ser una barra superior.
   --------------------------------------------------------------------------- */
@media (min-width:901px){
  .ac-side{
    position:sticky;
    top:0;
    align-self:start;
    height:100vh;
    height:100dvh;          /* en móvil evita el salto de la barra del navegador */
    overflow-y:auto;
  }
}

/* Las fichas de categorías.

   Dos problemas reales, comprobados eligiendo 20 categorías de verdad: con un
   tope corto se cortaban a media palabra, y sin tope empujaban el nombre, el
   correo y el botón tan abajo que había que recorrer media pantalla para
   terminar de registrarse.

   La solución es un tope alto —caben unas seis filas— con desplazamiento propio
   y un margen inferior, para que la última fila se vea entera y no partida. */
.cat-picker-chips{
  max-height:186px;
  overflow-y:auto;
  padding:2px 2px 6px;
  scrollbar-width:thin;
}
/* Cuando hay tantas que se desplazan, el borde inferior avisa de que sigue */
.cat-picker-chips:not(:hover){ scrollbar-color:var(--bd2) transparent }

/* ---------------------------------------------------------------------------
   Pantalla de instalación de la app PIZ Aprobaciones.
   Usa el mismo armazón de dos paneles que el resto del acceso; esto es lo propio
   suyo: la identidad de la app, el selector de sistema y los pasos.
   --------------------------------------------------------------------------- */
.app-id{ display:flex; align-items:center; gap:14px; margin-bottom:22px }
.app-id img{ width:56px; height:56px; border-radius:14px; box-shadow:0 8px 20px rgba(58,39,22,.15) }
.app-id b{ display:block; font-family:'Archivo',Arial,sans-serif; font-size:22px; line-height:1.1 }
.app-id span{ color:var(--mu); font-size:14.5px }

/* Android / iPhone: cada uno con instrucciones distintas de verdad */
.os{ display:grid; grid-template-columns:1fr 1fr; background:var(--sf2); border-radius:12px; padding:4px; margin-bottom:20px }
.os button{
  border:none; background:none; font:inherit; font-weight:700; font-size:15px;
  padding:10px; border-radius:9px; cursor:pointer; color:var(--mu);
}
.os button[aria-selected=true]{ background:var(--sf); color:var(--tx); box-shadow:0 4px 12px rgba(58,39,22,.08) }

.steps2{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column }
.steps2 li{
  display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:start;
  padding:14px 0; border-top:1px solid var(--bd); font-size:15.5px; line-height:1.5;
}
.steps2 li:first-child{ border-top:none; padding-top:4px }
.steps2 i{
  font-style:normal; width:30px; height:30px; border-radius:50%;
  background:var(--ac); color:#fff; font-weight:700; font-size:14px; display:grid; place-items:center;
}

/* Una tecla o botón del sistema, citado dentro del texto */
.kbd{
  display:inline-flex; align-items:center; gap:4px; background:var(--sf2);
  border-radius:6px; padding:1px 7px; font-weight:600; font-size:14px; white-space:nowrap;
}
.kbd svg{ width:14px; height:14px }

/* Bloque que solo se ve desde un computador: la app se instala en el teléfono */
.desk{
  display:grid; grid-template-columns:128px 1fr; gap:18px; align-items:center;
  background:var(--sf); border:1px solid var(--bd); border-radius:16px; padding:16px; margin-bottom:22px;
}
.desk .qr{ width:128px; height:128px; border-radius:10px; overflow:hidden; border:1px solid var(--bd); background:#fff }
.desk .qr svg{ width:100%; height:100%; display:block }
.desk b{ display:block; font-size:15.5px; margin-bottom:4px }
.desk p{ color:var(--mu); font-size:14px }

.fine{ font-size:13.5px; color:var(--mu); text-align:center; margin-top:14px }
.panel[hidden], .ac-btn[hidden], .desk[hidden]{ display:none !important }

@media (max-width:420px){
  .desk{ grid-template-columns:1fr; text-align:center }
  .desk .qr{ margin:0 auto }
}