/* =====================================================================
   Portal de Solicitudes · SEBIGUS
   Hoja de estilo del portal público (pantalla de acceso + portal interno).

   Se carga con un <link> desde las plantillas, no desde un bundle de
   assets: así el tema oscuro no se filtra al resto del sitio web.

   Dos precauciones para convivir con el CSS del sitio (Bootstrap + tema
   de Odoo), que se carga sí o sí con website.layout:

   1) Todas las clases van con prefijo seb-. Nombres como card-body,
      breadcrumb o toast-body existen en Bootstrap y sus reglas caían
      encima (fondo blanco, píldora gris en el breadcrumb).
   2) Cada selector cuelga de #wrap, el contenedor de la página. Eso deja
      la especificidad en (1,1,x) y le gana a las reglas del sitio, que
      llegan a escribirse como "#wrapwrap footer".

   Las rutas de las imágenes son relativas a este archivo (static/src/css/),
   por eso empiezan con ../img/
   ===================================================================== */
:root{
    /* ---- Paleta Odoo 19 oscuro ---- */
    --bg:          #1b1d26;
    --surface:     #262a36;
    --surface-2:   #21242f;
    --line:        rgba(255,255,255,.09);
    --line-strong: rgba(255,255,255,.16);
    --text-white:  #e0e0dc;
    --text-gray:   #868794;
    --accent:      #e178d5;
    --accent-deep: #6b3e66;
    --accent-lilac:#cbacff;
    --danger:      #ff5470;
    --warning:     #fbb945;
    /* Verde de acento tipo Odoo 19. Va aparte de --mod (que es rosa en IT y
       lila en RRHH) porque acá el color no distingue módulos: es el mismo en
       los dos. */
    --verde-odoo:  #00e58f;

    /* ---- Foto de fondo del acceso ---- */
    --foto: url('../img/fondo-login.jpg');
    /* Variante para pantallas paradas. La foto original es tan panorámica
       (2,4 a 1) que en un celular de pie sólo entra un quinto de su ancho y
       el logo queda cortado, se ancle donde se ancle. Esta versión arma la
       panorámica completa sobre un relleno desenfocado de la misma foto:
       nunca se pierde el logo. Se elige sola, más abajo. */
    --foto-vertical: url('../img/fondo-login-vertical.jpg');

    /* ---- Fondos de las pantallas internas ----
       Van desenfocados a propósito: una foto nítida detrás de un formulario
       compite por la atención. Son tres recortes distintos de la MISMA foto
       del acceso, así el portal entero se siente de una pieza. */
    --fondo-menu: url('../img/fondo-menu.jpg');
    --fondo-it:   url('../img/fondo-soporte-it.jpg');
    --fondo-rrhh: url('../img/fondo-rrhh.jpg');
}

/* El reset va acotado a la página del portal: el resto del sitio (y la
   barra del editor de Odoo, que se dibuja fuera de #wrap) no se toca. */
#wrap,
#wrap *{box-sizing:border-box;margin:0;padding:0;font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
/* color-scheme hace que el calendario de los campos de fecha y la lista de
   los desplegables nativos abran en oscuro, sin dibujarlos a mano. */
#wrap{color-scheme:dark;background:var(--bg);color:var(--text-white)}
#wrap a{text-decoration:none;color:inherit}
#wrap ul{list-style:none}

/* =====================================================================
   PANTALLA
   Cada sección del portal es su propia URL, así que sólo se dibuja una
   por página. La clase se conserva porque es la que trae el fondo.
   ===================================================================== */
/* min-height en dos líneas a propósito: la segunda pisa a la primera sólo
   si el navegador la entiende. En el celular la barra de direcciones aparece
   y desaparece al desplazar, y con vh la pantalla "salta" porque vh se mide
   con la barra escondida. dvh sigue la altura real en cada momento. */
#wrap .seb-pantalla{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
    background-size:cover;background-position:center;background-repeat:no-repeat}

/* ============================ ACCESO ============================ */
/* El anclaje del fondo se decide más abajo según la forma de la ventana: el
   logo SEBIGUS está pegado al borde izquierdo de la foto y se pierde si el
   navegador recorta por los dos lados. */
#wrap #p-login{
    background-image:
        linear-gradient(to right,rgba(10,14,24,.62) 0%,rgba(10,14,24,.28) 55%,rgba(10,14,24,.68) 100%),
        linear-gradient(rgba(10,14,24,.18),rgba(10,14,24,.42)),
        var(--foto);
}
#wrap .seb-logo-spacer{height:clamp(110px,19vh,210px);flex-shrink:0}
/* El aire de la derecha es mayor que el de la izquierda a propósito: despega
   el panel del borde y lo deja sobre la parte más tranquila de la foto, en
   vez de encima de los juguetes del fondo. */
#wrap .seb-login-body{flex:1;display:flex;align-items:center;justify-content:space-between;gap:60px;padding:20px clamp(24px,12vw,260px) 40px 6%}
#wrap .seb-left-text{max-width:560px}
#wrap .seb-left-text h1{font-size:clamp(42px,5.5vw,76px);font-weight:900;line-height:1.02;margin-bottom:22px;text-transform:uppercase;letter-spacing:1px;text-shadow:0 4px 22px rgba(0,0,0,.7)}
#wrap .seb-left-text p{font-size:21px;color:#dfe4ec;line-height:1.5;margin-bottom:26px;text-shadow:0 2px 10px rgba(0,0,0,.7)}
#wrap .seb-left-text p strong{font-weight:700;color:#fff}
#wrap .seb-left-text p strong.seb-highlight{color:var(--accent)}
#wrap .seb-accent-line{width:130px;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--accent-deep) 0%,var(--accent) 55%,var(--accent-lilac) 100%);box-shadow:0 2px 12px rgba(225,120,213,.45)}

#wrap .seb-login-panel{width:100%;max-width:430px;flex-shrink:0;background:rgba(38,42,54,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:42px 38px;box-shadow:0 20px 50px rgba(0,0,0,.65)}
#wrap .seb-login-panel h2{font-size:26px;font-weight:700;text-align:center;margin-bottom:32px;color:var(--text-white)}
#wrap .seb-form-group{margin-bottom:22px}
#wrap .seb-form-group label{display:block;font-size:14px;color:var(--text-gray);margin-bottom:8px;font-weight:500}
#wrap .seb-input-wrapper{position:relative}
#wrap .seb-input-wrapper input{width:100%;padding:14px 60px 14px 46px;background:rgba(27,29,38,.75);border:1px solid rgba(255,255,255,.16);border-radius:8px;color:#fff;font-size:15px;outline:none;transition:.3s}
#wrap .seb-input-wrapper input:focus{border-color:var(--accent);background:rgba(27,29,38,.92);box-shadow:0 0 0 3px rgba(225,120,213,.2)}
#wrap .seb-input-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:20px;height:20px;fill:var(--text-gray)}
#wrap .seb-eye-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--text-gray);cursor:pointer;user-select:none;background:none;border:0;padding:0}
#wrap .seb-eye-icon:hover{color:var(--accent)}
#wrap .seb-caps-note{display:none;align-items:center;gap:7px;margin-top:10px;font-size:12.5px;color:var(--warning)}
#wrap .seb-caps-note.seb-show{display:flex}
#wrap .seb-caps-note svg{width:14px;height:14px;flex-shrink:0;fill:currentColor}
#wrap .seb-btn-login{width:100%;margin-top:8px;padding:15px;background:var(--accent-deep);border:none;border-radius:8px;color:#f4eaf2;font-weight:700;font-size:15px;cursor:pointer;transition:.2s}
#wrap .seb-btn-login:hover{background:#7d4a77;transform:translateY(-2px);box-shadow:0 10px 24px -8px var(--accent)}
#wrap .seb-btn-login:disabled{opacity:.6;transform:none;box-shadow:none;cursor:default}
#wrap .seb-register-link{display:block;text-align:center;margin-top:25px;font-size:13px;color:var(--text-gray)}
#wrap .seb-register-link a{color:#fff;text-decoration:underline}

/* Aviso de contraseña incorrecta */
#wrap .seb-login-alert{display:flex;align-items:flex-start;gap:10px;margin-bottom:24px;padding:13px 15px;border-radius:10px;font-size:13.5px;line-height:1.45;color:#ffc2cd;background:rgba(255,84,112,.12);border:1px solid rgba(255,84,112,.45)}
#wrap .seb-login-alert svg{width:17px;height:17px;flex-shrink:0;margin-top:1px;fill:var(--danger)}

/* ============================ BARRA SUPERIOR ============================ */
#wrap .seb-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 5%;background:var(--surface);border-bottom:1px solid var(--line)}
#wrap .seb-topbar-left{display:flex;align-items:center;gap:14px;min-width:0}
#wrap .seb-app-tile{width:28px;height:28px;flex-shrink:0;display:block}
#wrap .seb-app-name{font-size:15px;font-weight:700;letter-spacing:.3px;white-space:nowrap;color:var(--text-white)}
#wrap .seb-breadcrumb{display:block;margin:0;padding:0 0 0 14px;background:none;border-radius:0;font-size:13px;font-weight:600;color:var(--text-gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:1px solid var(--line-strong)}
#wrap .seb-breadcrumb strong{color:var(--text-white);font-weight:700}
#wrap .seb-link{color:var(--text-gray);text-decoration:none;cursor:pointer;background:none;border:none;font:inherit;font-weight:600}
#wrap .seb-link:hover{color:var(--text-white)}

/* =====================================================================
   FONDOS DE LAS PANTALLAS INTERNAS
   Cada pantalla usa un recorte distinto de la misma foto, con un velo
   encima. El velo es lo que hace que el fondo sea fondo: si se aclara,
   la foto empieza a pelear con el contenido.
   ===================================================================== */
#wrap #p-menu{
    background-image:
        linear-gradient(rgba(20,22,32,.68),rgba(20,22,32,.84)),
        var(--fondo-menu);
}
/* En los formularios el velo es más cerrado que en el menú: acá se lee y se
   escribe, y cualquier textura de más cansa la vista. */
#wrap #p-it{
    background-image:
        linear-gradient(rgba(19,21,28,.82),rgba(19,21,28,.90)),
        var(--fondo-it);
}
#wrap #p-rrhh{
    background-image:
        linear-gradient(rgba(19,21,28,.82),rgba(19,21,28,.90)),
        var(--fondo-rrhh);
}

/* Barra, tarjetas y pie se vuelven translúcidos con desenfoque, igual que el
   panel de acceso: dejan asomar la foto sin perder legibilidad. Si el
   navegador no soporta backdrop-filter, el color de base es lo bastante
   opaco y la pantalla se ve como una tarjeta común. */
#wrap #p-it .seb-topbar,
#wrap #p-rrhh .seb-topbar{background:rgba(38,42,54,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
#wrap #p-it .seb-ticket-card,
#wrap #p-rrhh .seb-ticket-card{background:rgba(38,42,54,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-color:rgba(255,255,255,.15)}
#wrap #p-it footer,
#wrap #p-rrhh footer{background:rgba(27,29,38,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#wrap #p-menu .seb-topbar{background:rgba(38,42,54,.80);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
#wrap #p-menu .seb-app-card{background:rgba(38,42,54,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:rgba(255,255,255,.15)}
#wrap #p-menu footer{background:rgba(27,29,38,.60);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
/* El título va sobre la foto, sin tarjeta detrás: la sombra lo despega. */
#wrap #p-menu .seb-page-head h1{text-shadow:0 4px 22px rgba(0,0,0,.65)}
#wrap #p-menu .seb-page-head p{text-shadow:0 2px 10px rgba(0,0,0,.6)}

#wrap .seb-page-head{text-align:center;padding:60px 20px 10px}
#wrap .seb-page-head h1{font-size:clamp(28px,4vw,40px);font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--text-white)}
#wrap .seb-page-head p{margin-top:12px;font-size:16px;color:var(--text-gray)}
#wrap .seb-page-head .seb-accent-line{margin:22px auto 0;height:4px;width:120px}
#wrap .seb-apps-grid{flex:1;display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:34px;padding:50px 5% 70px}
#wrap .seb-app-card{width:100%;max-width:380px;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;color:inherit;cursor:pointer;transition:.25s;box-shadow:0 14px 34px rgba(0,0,0,.45)}
#wrap .seb-app-card:hover,
#wrap .seb-app-card:focus-visible{transform:translateY(-6px);border-color:var(--mod);box-shadow:0 20px 46px rgba(0,0,0,.55),0 0 0 1px var(--mod);outline:none}
#wrap .seb-app-card.seb-mod-it{--mod:var(--accent)}
#wrap .seb-app-card.seb-mod-rrhh{--mod:var(--accent-lilac)}
#wrap .seb-card-top{padding:40px 30px 28px;text-align:center;border-bottom:1px solid var(--line);position:relative}
#wrap .seb-card-top::before{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);width:190px;height:130px;background:var(--mod);opacity:.13;filter:blur(38px);border-radius:50%;pointer-events:none}
#wrap .seb-app-icon{width:88px;height:88px;display:block;margin:0 auto 22px;position:relative;filter:drop-shadow(0 10px 20px rgba(0,0,0,.45));transition:.25s}
#wrap .seb-app-card:hover .seb-app-icon{transform:scale(1.06)}
#wrap .seb-card-top h2{font-size:21px;font-weight:700;color:var(--text-white)}
#wrap .seb-card-tag{display:inline-block;margin-top:11px;font-size:14px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--verde-odoo)}
#wrap .seb-card-desc{flex:1;padding:26px 30px;font-size:14px;line-height:1.6;color:var(--text-gray);text-align:center}
#wrap .seb-card-foot{padding:0 30px 30px}
#wrap .seb-btn-open{display:block;width:100%;padding:14px;border:none;border-radius:8px;font-size:13px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#f4eaf2;text-align:center;background:var(--accent-deep);transition:.2s}
#wrap .seb-app-card:hover .seb-btn-open{background:#7d4a77;box-shadow:0 10px 22px -8px var(--accent)}

/* ============================ FORMULARIOS ============================ */
#wrap .seb-form-wrap{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:55px 5% 70px}
#wrap .seb-ticket-card{width:100%;max-width:900px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.45)}
#wrap .seb-card-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 30px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.025);border-radius:16px 16px 0 0}
#wrap .seb-card-head-left{display:flex;align-items:center;gap:14px;min-width:0}
#wrap .seb-head-icon{width:40px;height:40px;flex-shrink:0}
#wrap .seb-card-head h1{font-size:16px;font-weight:600;color:var(--text-gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#wrap .seb-card-head h1 strong{color:var(--text-white);font-weight:700}
#wrap .seb-btn-discard{display:inline-block;padding:10px 20px;background:transparent;border:1px solid var(--line-strong);border-radius:8px;color:var(--text-gray);font-size:13px;font-weight:600;cursor:pointer;transition:.2s}
#wrap .seb-btn-discard:hover{border-color:var(--danger);color:var(--danger)}
#wrap .seb-card-body{padding:34px 30px 36px;background:none}
/* El formulario es una pila de bloques (grillas y subpaneles): el aire entre
   ellos se pone acá una sola vez, en vez de repetirlo bloque por bloque. */
#wrap .seb-form > * + *{margin-top:24px}
#wrap .seb-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 30px}
#wrap .seb-field{position:relative}
#wrap .seb-field.seb-full{grid-column:1/-1}
#wrap .seb-field label{display:block;font-size:13px;font-weight:600;color:var(--text-white);margin-bottom:9px}
#wrap .seb-field label .seb-req{color:var(--accent);margin-left:3px}
#wrap .seb-field label .seb-opt{color:var(--text-gray);font-weight:500}
#wrap .seb-field input[type=text],
#wrap .seb-field input[type=email],
#wrap .seb-field input[type=date],
#wrap .seb-field select,
#wrap .seb-field textarea{width:100%;padding:13px 16px;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:8px;color:var(--text-white);font-size:14px;outline:none;transition:.2s}
/* La flecha del desplegable va dibujada acá: el triángulo nativo no se
   puede pintar. */
#wrap .seb-field select{cursor:pointer;appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23868794' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;background-size:16px 16px;padding-right:42px}
#wrap .seb-field select:hover{border-color:var(--accent)}
#wrap .seb-field textarea{min-height:130px;resize:vertical;line-height:1.6}
#wrap .seb-field input::placeholder,
#wrap .seb-field textarea::placeholder{color:#6a6b78}
#wrap .seb-field input:focus,
#wrap .seb-field select:focus,
#wrap .seb-field textarea:focus{border-color:var(--accent);background-color:var(--surface);box-shadow:0 0 0 3px rgba(225,120,213,.2)}
#wrap .seb-field input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.75);cursor:pointer}
/* Los campos dentro de un subpanel ya apoyan sobre superficie oscura: se
   oscurecen apenas para seguir leyéndose como zona editable. */
#wrap .seb-subpanel .seb-field input,
#wrap .seb-subpanel .seb-field select,
#wrap .seb-subpanel .seb-field textarea{background-color:#1c1f29}

/* Texto de ayuda debajo de un campo */
#wrap .seb-hint{margin-top:7px;font-size:12px;line-height:1.5;color:var(--text-gray)}
#wrap .seb-hint.seb-error{color:var(--danger)}
#wrap .seb-hint.seb-italic{font-style:italic}

/* Bloques que aparecen según el tipo de pedido */
#wrap .seb-subpanel{padding:22px 24px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px}
#wrap .seb-subpanel-note{font-size:12.5px;line-height:1.55;color:var(--text-gray);margin-bottom:18px}
#wrap .seb-subpanel.seb-warning{background:rgba(251,185,69,.07);border-color:rgba(251,185,69,.35)}
#wrap .seb-subpanel.seb-warning .seb-field label{color:var(--warning)}
#wrap .hidden-section{display:none !important}

/* Grilla de casillas para pedir equipamiento */
#wrap .seb-check-group{margin-bottom:20px}
#wrap .seb-check-group:last-child{margin-bottom:0}
#wrap .seb-check-group-title{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-gray);margin-bottom:10px}
#wrap .seb-check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
#wrap .seb-check{display:flex;align-items:center;gap:10px;padding:11px 13px;background:#1c1f29;border:1px solid var(--line-strong);border-radius:8px;font-size:13.5px;line-height:1.35;color:var(--text-white);cursor:pointer;transition:.2s}
#wrap .seb-check:hover{border-color:var(--accent);background:#22252f}
#wrap .seb-check input{width:16px;height:16px;flex-shrink:0;accent-color:var(--accent);cursor:pointer}

/* Adjuntos */
#wrap .seb-file-input{width:100%;padding:11px 14px;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:8px;color:var(--text-gray);font-size:13.5px;cursor:pointer;outline:none;transition:.2s}
#wrap .seb-file-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(225,120,213,.2)}
#wrap .seb-file-input::file-selector-button{background:var(--accent-deep);color:#f4eaf2;border:0;border-radius:6px;padding:.5rem .95rem;margin-right:.85rem;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;cursor:pointer;transition:.2s}
#wrap .seb-file-input::file-selector-button:hover{background:#7d4a77}
/* Navegadores WebKit viejos */
#wrap .seb-file-input::-webkit-file-upload-button{background:var(--accent-deep);color:#f4eaf2;border:0;border-radius:6px;padding:.5rem .95rem;margin-right:.85rem;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;cursor:pointer}

#wrap .seb-form-foot{margin-top:32px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
#wrap .seb-btn-save{padding:14px 34px;border:none;border-radius:8px;background:var(--accent-deep);color:#f4eaf2;font-size:13px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;cursor:pointer;transition:.2s}
#wrap .seb-btn-save:hover{background:#7d4a77;transform:translateY(-2px);box-shadow:0 12px 24px -10px var(--accent)}
#wrap .seb-btn-save:disabled{opacity:.6;transform:none;box-shadow:none;cursor:not-allowed}
#wrap .seb-foot-note{font-size:12.5px;color:var(--text-gray)}

/* =====================================================================
   BUSCADOR DE EMPLEADO
   El desplegable lo arma el JavaScript de la plantilla: estas clases son
   las que aplica a cada resultado.
   ===================================================================== */
#wrap .seb-suggestions{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;max-height:280px;overflow-y:auto;padding:6px;background:#2b2f3d;border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.6)}
#wrap .seb-result{display:block;width:100%;padding:11px 14px;border:0;border-radius:6px;background:none;text-align:left;cursor:pointer;outline:none}
#wrap .seb-result:hover,
#wrap .seb-result:focus{background:rgba(225,120,213,.16)}
#wrap .seb-result-name{font-size:14px;font-weight:600;color:var(--text-white)}
#wrap .seb-result-sub{font-size:12px;color:var(--text-gray);margin-top:2px}
#wrap .seb-result-empty{padding:11px 14px;font-size:13.5px;color:var(--text-gray)}
#wrap .seb-suggestions::-webkit-scrollbar{width:8px}
#wrap .seb-suggestions::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:8px}

/* ============================ AVISOS ============================ */
/* El centrado se repite en los dos fotogramas: el aviso se centra con
   translate(-50%,-50%) y una animación que sólo mueva Y se lo borraría. */
@keyframes sebigusToastIn{from{opacity:0;transform:translate(-50%,calc(-50% - 12px))}to{opacity:1;transform:translate(-50%,-50%)}}
/* Centrado en la pantalla, sobre el contenido. Al ser fijo no depende del
   header ni del desplazamiento: la posición sale entera de acá. */
#wrap .sebigus-toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% - 32px);z-index:1050;display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-radius:12px;border:1px solid;background:var(--surface);box-shadow:0 24px 60px rgba(0,0,0,.7);animation:sebigusToastIn .25s ease-out}
#wrap .sebigus-toast svg{width:20px;height:20px;flex-shrink:0;margin-top:1px}
#wrap .sebigus-toast .seb-toast-body{flex:1;min-width:0}
#wrap .sebigus-toast .seb-toast-title{font-size:13.5px;font-weight:700}
#wrap .sebigus-toast .seb-toast-text{font-size:13px;line-height:1.5;color:var(--text-gray);margin-top:2px}
#wrap .sebigus-toast.seb-ok{border-color:rgba(0,229,143,.4);background:linear-gradient(rgba(0,229,143,.10),rgba(0,229,143,.10)),var(--surface)}
#wrap .sebigus-toast.seb-ok svg{fill:var(--verde-odoo)}
#wrap .sebigus-toast.seb-ok .seb-toast-title{color:var(--verde-odoo)}
#wrap .sebigus-toast.seb-err{border-color:rgba(255,84,112,.45);background:linear-gradient(rgba(255,84,112,.10),rgba(255,84,112,.10)),var(--surface)}
#wrap .sebigus-toast.seb-err svg{fill:var(--danger)}
#wrap .sebigus-toast.seb-err .seb-toast-title{color:#ff8a9c}
#wrap .seb-toast-close{flex-shrink:0;background:none;border:0;color:var(--text-gray);font-size:20px;line-height:1;padding:0 4px;cursor:pointer}
#wrap .seb-toast-close:hover{color:var(--text-white)}
@media (min-width:640px){
    #wrap .sebigus-toast{width:100%;max-width:440px}
}

/* ============================ PIE ============================ */
#wrap footer{display:flex;flex-wrap:wrap;justify-content:center;gap:25px;font-size:13px;color:var(--text-gray);padding:22px 5%;border-top:1px solid var(--line);background:none}
#wrap footer a{color:inherit}
#wrap footer a:hover{color:#fff}
#wrap #p-login footer{border-top:1px solid rgba(255,255,255,.12);justify-content:flex-start;margin:0 6%;padding:22px 0}

/* =====================================================================
   AUTOCONFIGURACIÓN DEL FONDO
   Cuatro preguntas, en este orden. Ninguna pregunta por el aparato.
   ===================================================================== */

/* --- 1) ¿La ventana es ancha o parada? -------------------------------
   Las fotos son panorámicas. En una ventana ancha entran casi enteras;
   en una parada el navegador tiene que recortar muchísimo a los costados
   y sólo queda una franja del medio.
   Un celular acostado cae acá, igual que un monitor: ve la panorámica. */
@media (min-aspect-ratio:1/1){
    /* El logo está en el extremo izquierdo de la foto: anclando ahí, el
       recorte cae del lado derecho, donde sólo hay mesa. */
    #wrap #p-login{background-position:left center}
    #wrap #p-menu,
    #wrap #p-it,
    #wrap #p-rrhh{background-position:center}
}

/* --- 2) Ventana parada (celular de pie) -----------------------------
   Queda una franja angosta, así que hay que elegir bien cuál. Además se
   vela un poco más: con menos escena a la vista, lo que se ve pierde
   sentido y conviene que pese menos. */
@media (max-aspect-ratio:1/1){
    /* El acceso cambia de imagen, no sólo de encuadre: acá va la variante
       vertical, que trae la panorámica entera y conserva el logo. */
    #wrap #p-login{background-position:center;
        background-image:linear-gradient(rgba(10,14,24,.60),rgba(10,14,24,.78)),var(--foto-vertical)}
    #wrap #p-menu{background-position:center;
        background-image:linear-gradient(rgba(20,22,32,.76),rgba(20,22,32,.89)),var(--fondo-menu)}
    #wrap #p-it{background-position:center;
        background-image:linear-gradient(rgba(19,21,28,.86),rgba(19,21,28,.93)),var(--fondo-it)}
    #wrap #p-rrhh{background-position:center;
        background-image:linear-gradient(rgba(19,21,28,.86),rgba(19,21,28,.93)),var(--fondo-rrhh)}
}

/* --- 3) ¿El aparato tiene mouse? ------------------------------------
   El fondo fijo (efecto parallax) se ve muy bien con mouse, pero en
   pantalla táctil "salta" al desplazar, sobre todo en iPhone. En vez de
   adivinar por el ancho, se pregunta si hay un puntero fino: eso separa
   el mouse del dedo, que es lo que de verdad importa acá. */
@media (hover:hover) and (pointer:fine){
    #wrap .seb-pantalla{background-attachment:fixed}
}

/* ============================ PANTALLAS CHICAS ============================
   De acá para abajo es acomodo del contenido, no del fondo: qué se apila
   y qué entra al lado de qué. Eso sí depende del ancho disponible. */
@media (max-width:1024px){
    #wrap .seb-login-body{flex-direction:column;justify-content:center;gap:45px;text-align:center;padding:10px 20px 40px}
    #wrap .seb-left-text{max-width:100%}
    #wrap .seb-left-text .seb-accent-line{margin:0 auto}
    #wrap .seb-logo-spacer{height:clamp(90px,15vh,150px)}
    #wrap #p-login footer{justify-content:center;margin:0 20px}
}
/* --- 4) ¿La ventana es muy baja? ---
   IMPORTANTE: este bloque va DESPUÉS del de pantallas chicas a propósito.
   Las dos reglas tienen el mismo peso, así que gana la última escrita: si
   estuviera arriba, el bloque de ancho volvería a estirar los espacios y el
   panel se saldría de la pantalla en el celular acostado.
   Un celular acostado tiene la altura de una tira: 350 px o menos. Ahí
   entra la panorámica completa, que es lo que se busca, pero el aire de
   arriba se come la pantalla y el formulario queda fuera de vista. */
@media (max-height:560px) and (min-aspect-ratio:1/1){
    #wrap .seb-logo-spacer{height:clamp(30px,7vh,56px)}
    #wrap .seb-login-body{gap:26px;padding:6px 5% 14px;align-items:flex-start}
    #wrap .seb-left-text h1{font-size:clamp(24px,5.5vh,38px);margin-bottom:10px}
    #wrap .seb-left-text p{font-size:15px;margin-bottom:12px}
    #wrap .seb-accent-line{height:4px;width:100px}
    /* El panel entero se achica: con sólo comprimir el aire de afuera,
       el botón de ingresar quedaba abajo del borde de la pantalla. */
    #wrap .seb-login-panel{max-width:370px;padding:20px 24px;border-radius:14px}
    #wrap .seb-login-panel h2{font-size:20px;margin-bottom:16px}
    #wrap .seb-form-group{margin-bottom:12px}
    #wrap .seb-form-group label{font-size:13px;margin-bottom:5px}
    #wrap .seb-input-wrapper input{padding:10px 56px 10px 42px;font-size:14px}
    #wrap .seb-btn-login{padding:11px;font-size:14px}
    #wrap .seb-register-link{margin-top:14px}
    #wrap #p-login footer{padding:10px 0}
    #wrap .seb-page-head{padding:22px 20px 4px}
    #wrap .seb-apps-grid{padding:18px 20px 26px}
    #wrap .seb-form-wrap{padding:20px 16px 28px}
}

/* El celular parado tiene alto de sobra en apariencia, pero el panel de
   acceso es alto y el aire del logo lo empujaba unos píxeles fuera de
   pantalla: obligaba a desplazar para llegar al botón. Se recorta ese aire. */
@media (max-aspect-ratio:1/1) and (max-height:920px){
    #wrap .seb-logo-spacer{height:clamp(64px,9vh,96px)}
    #wrap .seb-login-body{gap:34px;padding:10px 20px 26px}
}

/* El celular acostado es angosto pero ancho: no debe apilar como uno de pie,
   porque la columna quedaría más alta que la pantalla. Vuelve a dos costados. */
@media (max-width:1024px) and (max-height:560px) and (min-aspect-ratio:1/1){
    #wrap .seb-login-body{flex-direction:row;text-align:left;justify-content:space-between;gap:26px}
    #wrap .seb-left-text .seb-accent-line{margin:0}
    #wrap #p-login footer{justify-content:flex-start;margin:0 5%}
}
@media (max-width:760px){
    #wrap .seb-topbar{flex-wrap:wrap;padding:14px 20px}
    #wrap .seb-breadcrumb{padding-left:0;border-left:none}
    #wrap .seb-form-wrap{padding:30px 16px 50px}
    #wrap .seb-card-head{padding:16px 20px}
    #wrap .seb-card-body{padding:26px 20px 30px}
    #wrap .seb-form-grid{grid-template-columns:1fr}
    #wrap .seb-apps-grid{padding:36px 20px 50px;gap:24px}
    #wrap .seb-subpanel{padding:18px 16px}
    #wrap .seb-check-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
    #wrap *{transition:none !important;animation:none !important}
}