body { margin:0; font-family:Segoe UI, Tahoma, Arial, sans-serif; font-size:13px; color:#22303c; background:#eef2f5; }
a { color:#1a5a92; text-decoration:none; }

.barra { background:#12364f; color:#fff; padding:10px 18px; display:block; overflow:hidden; }
.barra .logo { font-size:17px; font-weight:bold; letter-spacing:.3px; }
.barra .usuario { float:right; font-size:12px; padding-top:4px; }
.barra .usuario a { color:#9fd0f2; }

.contenedor { display:block; overflow:hidden; }
.menu { width:220px; float:left; min-height:600px; background:#1d4b6b; padding:12px 0; }
.menu .grupo { color:#8fc4e6; font-size:11px; text-transform:uppercase; padding:12px 16px 4px; letter-spacing:1px; }
.menu .opcion { display:block; color:#eaf4fb; padding:7px 16px; }
.menu .opcion:hover { background:#28617f; }

.cuerpo { margin-left:220px; padding:18px 22px; }
h2.titulo { margin:0 0 14px; font-size:19px; color:#12364f; border-bottom:2px solid #c9d8e2; padding-bottom:7px; }

.panel { background:#fff; border:1px solid #cfdbe3; padding:14px; margin-bottom:14px; }
.panel h3 { margin:0 0 10px; font-size:14px; color:#1d4b6b; }

table.form td { padding:4px 8px 4px 0; vertical-align:middle; }
table.form td.et { text-align:right; color:#4a5a67; width:150px; }

input[type=text], input[type=password], input[type=date], input[type=search], select, textarea {
  border:1px solid #b8c6d1; padding:4px 6px; font-family:inherit; font-size:13px; background:#fff; }
input[type=text]:focus, select:focus { border-color:#2d82c4; outline:none; }
.txt { width:230px; }
.txt-lg { width:420px; }
.txt-sm { width:110px; }
input[type=date].txt-sm { width:150px; }
input[type=search].txt { width:230px; margin-bottom:4px; }

.btn { background:#1a6fa8; color:#fff; border:0; padding:6px 14px; cursor:pointer; font-size:13px; margin-right:5px; }
.btn:hover { background:#14588a; }
.btn-sec { background:#6b7d8a; }
.btn-sec:hover { background:#556670; }
.btn-del { background:#b5382f; }
.btn-del:hover { background:#93291f; }

.grid { border-collapse:collapse; width:100%; background:#fff; }
.grid th { background:#1d4b6b; color:#fff; text-align:left; padding:6px 8px; font-weight:600; }
.grid td { border-bottom:1px solid #e0e7ec; padding:5px 8px; }
.grid tr:hover td { background:#f3f8fb; }
.grid .paginador td { background:#eef2f5; }
.grid .paginador a { padding:0 4px; }

.msg-ok { background:#e5f5e8; border:1px solid #9bd0a8; color:#1d6b2f; padding:8px 10px; margin-bottom:10px; }
.msg-err { background:#fdeaea; border:1px solid #e2a3a0; color:#9a2d26; padding:8px 10px; margin-bottom:10px; }

/* Login */
.login-fondo { background:#12364f url('fondo-login.jpg') center center no-repeat; background-size:cover; height:100vh; margin:0; position:relative; }
.login-velo { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(10,38,58,0.55); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.login-caja { width:330px; margin:0 auto; top:110px; position:relative; z-index:2; background:rgba(255,255,255,0.95); padding:26px 28px; border-radius:6px; box-shadow:0 10px 32px rgba(0,0,0,0.45); }
.login-caja h1 { font-size:18px; margin:0 0 4px; color:#12364f; }
.login-caja p.sub { margin:0 0 18px; color:#6b7d8a; font-size:12px; }
.login-caja input[type=text], .login-caja input[type=password] { width:100%; box-sizing:border-box; padding:7px; margin-bottom:10px; }
.login-caja .btn { width:100%; padding:9px; font-size:14px; margin:0; }
.login-caja p.sub2 { margin:0 0 10px; color:#12364f; font-size:12px; font-weight:bold; }

/* Barra y menú colapsable */
.barra { display:flex; align-items:center; flex-wrap:wrap; gap:12px 22px; overflow:visible; min-height:42px; }
.barra-centro { flex:1; min-width:280px; }
.barra .usuario { float:none; padding:0; margin-left:auto; text-align:right; }
.firma { font-weight:700; }
.firma-vigente { color:#7de2aa; }
.firma-caducada { color:#ffb9b1; }
.sel-bodega { max-width:260px; }
.menu { box-sizing:border-box; min-height:calc(100vh - 62px); }
.menu-toggle { display:block; width:32px; height:32px; margin:0 10px 8px auto; border:1px solid rgba(255,255,255,.38); background:#173e59; color:#fff; font-size:25px; line-height:25px; cursor:pointer; border-radius:4px; }
.menu-toggle:hover { background:#28617f; }
.menu, .cuerpo { transition:width .2s ease, margin-left .2s ease, padding .2s ease; }
body.menu-retraido .menu { width:48px; overflow:hidden; }
body.menu-retraido .cuerpo { margin-left:48px; }
body.menu-retraido .menu-inicio, body.menu-retraido .menu-grupo { display:none; }
body.menu-retraido .menu-toggle { margin-left:8px; margin-right:8px; }
.menu-inicio { display:block; padding:11px 16px; font-weight:600; color:#eaf4fb; }
.menu-grupo { border-top:1px solid rgba(255,255,255,.12); }
.menu .grupo { display:block; cursor:pointer; padding:13px 16px; color:#c7e5f5; font-size:12px; font-weight:600; list-style:none; }
.menu .grupo::-webkit-details-marker { display:none; }
.menu .grupo:after { content:'⌄'; float:right; font-size:17px; line-height:10px; }
.menu-grupo[open] .grupo:after { transform:rotate(180deg); }
.menu .grupo:hover, .menu-inicio:hover { background:#28617f; }
.menu .opcion { padding-left:27px; background:#173e59; }

/* Indicadores */
.tarjetas { display:grid; grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:14px; margin:16px 0 22px; }
.tarjeta { box-sizing:border-box; min-height:154px; background:#fff; border:1px solid #cbdce6; border-radius:12px; padding:18px; box-shadow:0 3px 10px rgba(18,54,79,.06); position:relative; }
.tarjeta a { display:block; color:inherit; height:100%; }
.tarjeta a:hover .ttxt { text-decoration:underline; }
.tarjeta-icono { display:flex; width:35px; height:35px; align-items:center; justify-content:center; border-radius:8px; background:#e2f0f6; color:#1d4b6b; font-size:21px; margin-bottom:10px; }
.tarjeta:nth-child(2) .tarjeta-icono { background:#e8f3e9; color:#26683c; }
.tarjeta:nth-child(3) .tarjeta-icono { background:#eaf0fc; color:#295b99; }
.tarjeta:nth-child(4) .tarjeta-icono { background:#fff0ea; color:#9b4c33; }
.tarjeta-alerta { border-color:#d5b66d; background:#fffbef; }
.tarjeta-alerta .tarjeta-icono { background:#f9e7b8; color:#725315; }
.tnum { font-size:28px; font-weight:700; line-height:1.15; color:#12364f; margin-bottom:8px; }
.ttxt { font-size:13px; line-height:1.4; color:#405566; }
.ayuda { display:block; color:#586e7e; margin-top:4px; }
@media(max-width:720px) { .menu, body.menu-retraido .menu { width:100%; min-height:0; float:none; } .cuerpo, body.menu-retraido .cuerpo { margin-left:0; padding:16px; } body.menu-retraido .menu { height:48px; } .barra-centro { min-width:0; } .barra .usuario { margin-left:0; } .tarjetas { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); } }

/* Logo de la barra superior: tamaño proporcionado */
.barra { padding:6px 18px; min-height:48px; }
.barra .logo { display:inline-flex; align-items:center; gap:10px; font-size:17px; white-space:nowrap; }
.barra .logo-img { height:34px; width:auto; max-width:120px; object-fit:contain; background:#fff; border-radius:6px; padding:3px 6px; box-sizing:border-box; display:block; }

/* Ventana flotante de búsqueda */
.gb-fondo { position:fixed; inset:0; top:0; left:0; right:0; bottom:0; background:rgba(12,32,48,.45); z-index:1000; display:none; align-items:flex-start; justify-content:center; padding-top:7vh; }
.gb-ventana { background:#fff; width:min(880px,94vw); max-height:80vh; display:flex; flex-direction:column; border-radius:10px; box-shadow:0 18px 50px rgba(0,0,0,.35); overflow:hidden; }
.gb-cab { display:flex; justify-content:space-between; align-items:center; background:#12364f; color:#fff; padding:10px 14px; font-size:14px; }
.gb-cerrar { background:none; border:0; color:#fff; font-size:22px; cursor:pointer; line-height:1; }
.gb-filtros { display:flex; gap:10px; align-items:center; padding:12px 14px; border-bottom:1px solid #e0e7ec; flex-wrap:wrap; }
.gb-q { flex:1; min-width:200px; padding:6px 8px !important; }
.gb-res { overflow:auto; padding:0 14px; flex:1; }
.gb-tabla tbody tr { cursor:pointer; }
.gb-tabla td .btn { padding:3px 9px; font-size:12px; }
.gb-info { color:#586e7e; padding:14px 0; }
.gb-err { color:#9a2d26; }
.gb-pie { padding:8px 14px; color:#586e7e; font-size:12px; border-top:1px solid #e0e7ec; }
.btn-lupa { border:1px solid #b8c6d1; background:#eef4f8; cursor:pointer; padding:3px 7px; margin-left:3px; font-size:13px; vertical-align:middle; }
.btn-lupa:hover { background:#dbe9f2; }
.btn-icono { font-size:15px; padding:5px 10px; }

/* Ventana flotante del formulario de cliente rápido */
.modal-fondo { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(12,32,48,.45); z-index:900; display:flex; align-items:flex-start; justify-content:center; padding-top:5vh; }
.modal-caja { background:#fff; border-radius:10px; box-shadow:0 18px 50px rgba(0,0,0,.35); padding:18px 20px; width:min(760px,94vw); max-height:88vh; overflow:auto; }
.modal-caja h3 { margin:0 0 12px; color:#12364f; }
.oculto { display:none; }

/* Nombre del programa con efecto metalizado brillante */
.marca-metal { font-size:26px; font-weight:900; letter-spacing:1.5px; font-family:"Segoe UI",Arial,sans-serif;
  background:linear-gradient(100deg,#8e9aa4 0%,#f4f7fa 22%,#b9c4cc 40%,#ffffff 50%,#9aa6b0 62%,#e9eef2 80%,#7d8a95 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.08); filter:drop-shadow(0 1px 1px rgba(0,0,0,.55)); animation:brilloMetal 6s linear infinite; }
@keyframes brilloMetal { 0% { background-position:100% 0; } 100% { background-position:-120% 0; } }
/* Logotipo del sistema en el login */
.login-logo-sistema { text-align:center; margin:0 0 10px; }
.login-logo-sistema img { width:88px; max-width:88px; height:auto; display:inline-block; object-fit:contain; }

/* Logotipo en el login al validar la contraseña */
.login-logo { text-align:center; margin:0 0 14px; }
.login-logo img { max-width:220px; max-height:110px; width:auto; height:auto; object-fit:contain; }
.login-bienvenida { text-align:center; color:#1d7a3e; font-weight:bold; margin:0 0 10px; }

/* Pie del login: desarrollador */
.login-pie{
    position:fixed; left:0; right:0; bottom:14px;
    text-align:center; color:#e8e8e8; font-size:12px; line-height:1.5;
    text-shadow:0 1px 2px rgba(0,0,0,.55); letter-spacing:.4px; z-index:5;
}
.login-pie b{ font-size:12.5px; }

/* Botón INFO en la barra superior */
.btn-info-sup{
    display:inline-flex; align-items:center; gap:6px;
    background:linear-gradient(180deg,#2a82cc,#1a5f9e); color:#fff;
    border:1px solid #9fd0f2; border-radius:20px;
    padding:4px 14px; font-size:12px; font-weight:bold; cursor:pointer;
    letter-spacing:1px; box-shadow:0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35);
    transition:transform .12s ease, box-shadow .12s ease;
}
.btn-info-sup:hover{ background:linear-gradient(180deg,#3b93dd,#226eae); box-shadow:0 3px 9px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-info-sup:active{ transform:translateY(1px); box-shadow:0 1px 3px rgba(0,0,0,.4); }
.btn-info-ico{ font-size:14px; line-height:1; }

/* Ventana flotante de información del desarrollador */
.info-modal{
    position:fixed; inset:0; background:rgba(0,0,0,.45);
    display:flex; align-items:center; justify-content:center; z-index:9999;
}
.info-caja{
    background:#fff; border-radius:12px; padding:30px 44px; min-width:360px;
    border-top:6px solid #12364f;
    box-shadow:0 14px 44px rgba(0,0,0,.45); text-align:center; color:#222;
}
.info-caja p{ margin:6px 0; }
.info-nombre{ font-size:19px; font-weight:bold; color:#12364f; }
.info-cargo{ font-size:13px; font-weight:bold; letter-spacing:1px; color:#1a6fa8; }
.info-dato{ font-size:14px; }
.info-salir{
    margin-top:18px; padding:7px 34px; border-radius:20px;
    background:linear-gradient(180deg,#2a82cc,#1a5f9e); border:1px solid #155a94;
    box-shadow:0 2px 6px rgba(0,0,0,.3); font-weight:bold; letter-spacing:.6px;
}
.info-salir:hover{ background:linear-gradient(180deg,#3b93dd,#226eae); }

/* Shared adaptive layout; keep the existing GesBod palette. */
:root { --gb-surface:#fff; --gb-ink:#12364f; --gb-overlay:rgba(12,32,48,.82); --gb-welcome-shadow:0 12px 40px rgba(0,0,0,.28); }
* { box-sizing:border-box; }
body { overflow-wrap:break-word; letter-spacing:0; }
.contenedor { overflow:visible; }
.cuerpo { min-width:0; }
.panel { min-width:0; }
.btn, .btn-lupa, .btn-info-sup, .menu-toggle, .gb-cerrar { min-height:40px; border-radius:6px; white-space:normal; }
.btn { margin-bottom:5px; }
input[type=text], input[type=password], input[type=date], input[type=search], input[type=number], select, textarea {
    max-width:100%; min-height:40px; font-size:16px; border-radius:4px;
}
input[type=file] { max-width:100%; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline:2px solid var(--gb-ink); outline-offset:2px; }
.txt, .txt-lg, .txt-sm { max-width:100%; }
table.form { width:100%; }
table.form[data-adaptada] { display:block; }
table.form[data-adaptada] > tbody { display:block; }
table.form[data-adaptada] > tbody > tr { display:flex; flex-wrap:wrap; gap:12px 18px; margin-bottom:12px; }
table.form[data-adaptada] > tbody > tr > td.celda-adaptable { display:block; padding:0; width:auto; text-align:left; flex:1 1 240px; min-width:0; }
table.form[data-adaptada] > tbody > tr > td.celda-trasladada { display:none; }
.campo-adaptable { display:flex; flex-direction:column; gap:5px; min-width:0; }
.et-adaptable { color:var(--gb-ink); font-weight:600; }
.entrada-adaptable { display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-width:0; }
.entrada-adaptable > input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
.entrada-adaptable > select, .entrada-adaptable > textarea { width:auto; flex:1 1 140px; min-width:0; margin:0; }
.entrada-adaptable .btn { margin:0; }
.tabla-desplazable { width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tabla-desplazable .grid { min-width:640px; }
.opciones-adaptables { width:100%; }
.opciones-adaptables td { padding:6px; vertical-align:top; }
.grid td { overflow-wrap:anywhere; }
.grid input[type=text] { min-width:80px; }
.barra .logo, .marca-metal { letter-spacing:0; }
.barra-centro { min-width:0; overflow-wrap:anywhere; }
.barra .usuario { max-width:100%; overflow-wrap:anywhere; line-height:1.8; }
.sel-bodega { width:240px; max-width:100%; }
.info-modal, .modal-fondo, .gb-fondo { padding:16px; align-items:center; }
.info-caja { min-width:0; width:440px; max-width:100%; max-height:90vh; overflow:auto; padding:26px; border-radius:8px; }
.modal-caja, .gb-ventana { width:880px; max-width:100%; max-height:90vh; border-radius:8px; }
.modal-caja { width:760px; }
.gb-q { min-width:0; }
.gb-filtros > label { max-width:100%; }
.gb-tabla { min-width:650px; }
.login-fondo { height:auto; min-height:100vh; padding:42px 16px 20px; }
.login-caja { width:386px; max-width:100%; top:auto; margin:0 auto; padding:26px 28px; }
.login-fondo #frm { position:relative; z-index:2; width:100%; }
.login-pie { position:relative; bottom:auto; padding:26px 0 0; max-width:680px; margin:0 auto; letter-spacing:0; }
.login-logo img { max-width:100%; }
.bienvenida-sistema { position:fixed; inset:0; z-index:10000; align-items:center; justify-content:center; padding:20px; background:var(--gb-overlay); }
.bienvenida-contenido { width:440px; max-width:100%; max-height:95vh; overflow:auto; padding:22px; border-radius:8px; background:var(--gb-surface); color:var(--gb-ink); text-align:center; box-shadow:var(--gb-welcome-shadow); }
.bienvenida-androide { width:230px; max-width:100%; height:auto; aspect-ratio:1; object-fit:contain; display:block; margin:0 auto 18px; border-radius:8px; }
.bienvenida-contenido h1 { font-size:23px; line-height:1.25; margin:0 0 10px; }
.bienvenida-contenido p { font-size:17px; margin:0 0 18px; }
.bienvenida-contenido .btn { min-width:150px; }
.bienvenida-activa #frm, .bienvenida-activa .login-pie { visibility:hidden; }
@media (min-width:721px) and (max-width:1100px) {
    .menu { width:190px; }
    .cuerpo { margin-left:190px; padding:18px; }
    .barra { gap:10px; }
    .barra .usuario { flex-basis:100%; text-align:left; margin:0; }
}
@media (max-width:720px) {
    .barra { padding:12px; gap:8px; }
    .barra-centro, .barra .usuario { flex-basis:100%; text-align:left; }
    .menu, body.menu-retraido .menu { width:100%; min-height:0; }
    .cuerpo, body.menu-retraido .cuerpo { margin-left:0; padding:12px; }
    .menu-toggle { width:44px; height:44px; margin:0 10px 8px auto; }
    body.menu-retraido .menu { height:60px; }
    body.menu-retraido .menu-toggle { margin:0 10px 0 auto; }
    .panel { padding:12px; }
    .tarjetas { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .tarjeta { padding:14px; min-height:150px; border-radius:8px; }
    table.form[data-adaptada] > tbody > tr > td.celda-adaptable { flex-basis:100%; }
    .info-modal, .gb-fondo, .modal-fondo { padding:10px; }
    .gb-filtros { padding:10px; gap:8px; }
    .gb-filtros > label { flex-basis:100%; }
    .gb-filtros label select { width:100%; }
    .modal-caja { padding:14px; }
    .info-caja { padding:22px 16px; }
    .login-fondo { padding-top:22px; }
    .login-caja { padding:22px; }
    .opciones-adaptables, .opciones-adaptables tbody, .opciones-adaptables tr, .opciones-adaptables td { display:block; width:100%; }
    .bienvenida-contenido { padding:18px; }
}
@media (max-height:500px) {
    .bienvenida-androide { width:130px; margin-bottom:10px; }
    .bienvenida-contenido h1 { font-size:20px; }
    .bienvenida-contenido p { margin-bottom:10px; }
}
@media (prefers-reduced-motion:reduce) { *, *:before, *:after { animation:none !important; transition:none !important; } }