/* ============================================================================
   STRATTO — portal del cliente Gremio, tema "Imprenta / CMYK"
   ----------------------------------------------------------------------------
   Complementa a assets/stratto-ui.css (fondo, tipografía, st-tab, etc.) con la
   barra superior del cliente (includes/cliente-nav.php), los ajustes de las
   pantallas del portal y las pantallas de acceso (registro, recuperar/resetear
   contraseña, verificar email → body.st-auth). Solo visual, solo pantalla.
   ========================================================================== */

@media screen {

/* ---------- Barra superior ---------- */
.cn-bar {
    position: sticky; top: 0; z-index: 900;
    display: flex; align-items: center; gap: 18px;
    background: #111318; color: #c9cad1;
    padding: 10px 22px 10px 16px;
    box-shadow: 0 6px 24px rgba(17, 19, 24, .18);
}
.cn-bar::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, #00a3e0 0 25%, #e6007e 25% 50%, #ffcc00 50% 75%, #5a5d66 75%);
}
.cn-logo { display: flex; flex-shrink: 0; }
.cn-logo img { width: 150px; height: 55px; object-fit: cover; display: block; }
.cn-links { display: flex; gap: 4px; flex-wrap: wrap; }
.cn-bar .cn-link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 13px; border-radius: 10px;
    color: #c9cad1 !important; text-decoration: none; font-weight: 600; font-size: 14px;
    transition: background .15s, color .15s;
}
.cn-link .ui-ico { color: #7d7f8a; transition: color .15s; }
.cn-bar .cn-link:hover { background: #1b1d24; color: #fff !important; }
.cn-bar .cn-link:hover .ui-ico { color: #c9cad1; }
.cn-bar .cn-link.on { background: #23252d; color: #fff !important; box-shadow: inset 0 -3px 0 #e6007e; }
.cn-bar .cn-link.on .ui-ico { color: #ff4fa6; }
.cn-der { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.cn-campana { position: relative; }
.cn-bar .cn-ibtn {
    all: unset; cursor: pointer; position: relative;
    width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
    background: #1b1d24; color: #c9cad1; border: 1px solid #2a2d37;
    transition: background .15s, color .15s;
}
.cn-bar .cn-ibtn:hover { background: #23252d; color: #fff; }
.cn-bar a.cn-cta,
.cn-bar a.cn-cta:hover {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 11px;
    background: #ffcc00 !important; color: #111318 !important;
    font-weight: 800; font-size: 14px; text-decoration: none;
    box-shadow: 0 6px 18px rgba(255, 204, 0, .25) !important;
    transform: none !important;
}
.cn-bar a.cn-cta:hover { filter: brightness(1.06); box-shadow: 0 8px 24px rgba(255, 204, 0, .4) !important; }
.cn-bar a.cn-cta.on { box-shadow: 0 0 0 3px rgba(255, 204, 0, .35) !important; }
.cn-user { display: flex; align-items: center; gap: 9px; padding: 4px 12px 4px 4px; border-radius: 12px; background: #1b1d24; border: 1px solid #2a2d37; max-width: 240px; }
.cn-av { width: 32px; height: 32px; border-radius: 9px; background: #e6007e; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.cn-nombre { color: #fff; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-bar a.cn-salir { width: auto; padding: 0 12px; gap: 7px; display: inline-flex; color: #f87171 !important; font-weight: 700; font-size: 13px; text-decoration: none; }
.cn-bar a.cn-salir:hover { background: rgba(248, 113, 113, .12); }

@media (max-width: 1100px) {
    .cn-bar { flex-wrap: wrap; gap: 10px; }
    .cn-nombre, .cn-salir-txt { display: none; }
    .cn-user { padding: 4px; }
}
@media (max-width: 700px) {
    .cn-logo img { width: 110px; height: 40px; }
    .cn-links { order: 3; width: 100%; }
    .cn-link span { font-size: 13px; }
    .cn-cta span { display: none; }
}

/* ---------- Contenido del portal ---------- */
.cn-bar ~ .container { margin-top: 28px !important; margin-bottom: 48px !important; }
.cn-bar ~ .container h1,
.cn-bar ~ .container > h1 {
    font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: #111318;
}
.cn-bar ~ .container :where(input:not([type=checkbox]):not([type=radio]), select, textarea) { border-radius: 10px; }
.cn-bar ~ .container input:not([type=checkbox]):not([type=radio]):focus,
.cn-bar ~ .container select:focus,
.cn-bar ~ .container textarea:focus {
    outline: none; border-color: #111318 !important; box-shadow: 0 0 0 3px rgba(230, 0, 126, .14);
}
.cn-bar ~ .container input[type=checkbox],
.cn-bar ~ .container input[type=radio] { accent-color: #111318; }

/* Nuevo pedido / Calculadora: tarjeta blanca sobre el fondo cálido */
.cn-bar ~ .container .form-section {
    background: #fafaf8; border: 1px solid #e7e5df; border-radius: 16px;
}
.cn-bar ~ .container .form-section h3 { font-weight: 800; letter-spacing: -.01em; color: #111318; }

/* Mis Pedidos: tarjetas */
.pedido-card { border-left-color: #e6007e !important; border: 1px solid #e7e5df; border-left-width: 4px; border-radius: 16px !important; box-shadow: 0 1px 2px rgba(17,19,24,.04) !important; }
.pedido-card:hover { box-shadow: 0 10px 26px rgba(17,19,24,.08) !important; }
.pedido-header { background: #fff !important; }
.pedido-card.open .pedido-header, .pedido-header:hover { background: #fafaf8 !important; }
.pedido-numero { color: #111318 !important; }
.pedido-precio { color: #16a34a !important; letter-spacing: -.02em; }
.cn-bar ~ .container .btn { background: #111318; border-radius: 10px; font-weight: 700; }
.cn-bar ~ .container .btn:hover { background: #000; }

/* ---------- Pantallas de acceso (registro, recuperar, resetear, verificar) ---------- */
body.st-auth {
    background: #0b0c10 !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    position: relative; overflow-x: hidden;
}
body.st-auth::before, body.st-auth::after { content: ""; position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; }
body.st-auth::before { width: 720px; height: 720px; right: -220px; top: -260px; background: radial-gradient(circle, rgba(230,0,126,.28), transparent 65%); }
body.st-auth::after { width: 680px; height: 680px; left: -240px; bottom: -280px; background: radial-gradient(circle, rgba(0,163,224,.22), transparent 65%); }
body.st-auth .container {
    position: relative; z-index: 1;
    border-radius: 22px !important;
    box-shadow: 0 30px 80px rgba(0,0,0,.45) !important;
    overflow: hidden;
}
body.st-auth .container::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
    background: linear-gradient(90deg, #00a3e0 0 25%, #e6007e 25% 50%, #ffcc00 50% 75%, #111318 75%);
}
body.st-auth h1, body.st-auth h2 { font-weight: 800; letter-spacing: -.03em; color: #111318; }
body.st-auth input:not([type=checkbox]):not([type=radio]), body.st-auth select, body.st-auth textarea {
    border-radius: 11px !important; border-color: #e7e5df !important; background: #fafaf8;
}
body.st-auth input:not([type=checkbox]):not([type=radio]):focus, body.st-auth select:focus, body.st-auth textarea:focus {
    outline: none; border-color: #111318 !important; box-shadow: 0 0 0 3px rgba(230,0,126,.14) !important; background: #fff;
}
body.st-auth button[type=submit], body.st-auth .btn {
    background: #111318 !important; border-radius: 11px !important; font-weight: 700 !important; color: #fff !important;
}
body.st-auth button[type=submit]:hover, body.st-auth .btn:hover { background: #000 !important; box-shadow: 0 8px 20px rgba(17,19,24,.3) !important; }
body.st-auth a { color: #e6007e; }
body.st-auth input[type=checkbox] { accent-color: #111318; }

} /* fin @media screen */