@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Outfit:wght@500;600;700;800&display=swap");

:root {
    --fondo: #f1faf7;
    --fondo-panel: rgba(255,255,255,0.94);
    --superficie: rgba(255,255,255,0.86);
    --superficie-solida: #ffffff;
    --borde: rgba(20, 108, 78,0.12);
    --borde-fuerte: rgba(20, 108, 78,0.2);
    --texto: #18263a;
    --texto-suave: #63748a;
    --texto-tenue: #8ea0b4;
    --acento: #006341;
    --acento-oscuro: #004a30;
    --acento-claro: #e2f9f1;
    --rojo: #c8102e;
    --sombra-xl: 0 30px 70px -34px rgba(7, 68, 47, 0.35);
    --sombra-md: 0 22px 46px -30px rgba(12, 74, 53, 0.28);
    --transicion: 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
    margin: 0;
    min-height: 100dvh;
    font-family: "Manrope", "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 14% 10%, rgba(255, 184, 28, 0.20), transparent 44%),
        radial-gradient(circle at 86% 88%, rgba(200, 16, 46, 0.22), transparent 48%),
        linear-gradient(164deg, #04241a 0%, #006341 46%, #007a50 78%, #00432c 100%);
    background-attachment: fixed;
    color: var(--texto);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 72%, rgba(255, 184, 28, 0.12), transparent 34%),
        radial-gradient(circle at 76% 22%, rgba(200, 16, 46, 0.10), transparent 30%);
    filter: blur(42px);
}

h1, h2, h3, .marca-titulo {
    font-family: "Outfit", "Manrope", sans-serif;
    letter-spacing: -0.04em;
}

h1 {
    margin: 0;
    font-size: clamp(2.9rem, 4vw, 4.4rem);
    line-height: 0.96;
}

h2 { letter-spacing: -0.03em; }

p { line-height: 1.65; }

a {
    color: var(--acento-oscuro);
    text-decoration: none;
    transition: color var(--transicion), transform var(--transicion), opacity var(--transicion);
}

button,
input,
select,
textarea {
    font: inherit;
}

.layout {
    display: grid;
    grid-template-columns: 284px minmax(0, 1fr);
    min-height: 100dvh;
    transition: grid-template-columns 200ms ease;
}

html[data-sidebar="cerrado"] .layout {
    grid-template-columns: 0px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    min-height: 100dvh;
    padding: 24px 18px;
    /* vidrio verde translúcido sobre el fondo institucional (como la tarjeta
       del login): deja ver los difuminados de detrás */
    background: rgba(3, 34, 24, 0.55);
    backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255,255,255,0.10);
    color: #f7fffc;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow: hidden;
    transition: padding 200ms ease, opacity 160ms ease;
}

html[data-sidebar="cerrado"] .sidebar {
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.sidebar-toggle,
.sidebar-toggle-flotante {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.08);
    color: #f7fffc;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    flex: none;
    transition: background-color var(--transicion), transform var(--transicion), border-color var(--transicion);
}

.sidebar-toggle:hover,
.sidebar-toggle-flotante:hover {
    background: rgba(255,255,255,0.16);
    transform: translateY(-1px);
}

.sidebar-toggle-flotante {
    display: none;
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 90;
    background: linear-gradient(135deg, var(--acento-oscuro), var(--acento));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 18px 26px -20px rgba(9, 143, 97,0.85);
}

html[data-sidebar="cerrado"] .sidebar-toggle-flotante {
    display: inline-flex;
}

.sidebar-overlay {
    display: none;
}

.sidebar::before,
.sidebar::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    opacity: 0.6;
    filter: blur(2px);
}

.sidebar::before {
    width: 220px;
    height: 220px;
    top: -80px;
    right: -70px;
    background: radial-gradient(circle, rgba(255,184,28,0.30), transparent 68%);
}

.sidebar::after {
    width: 240px;
    height: 240px;
    bottom: -120px;
    left: -120px;
    background: radial-gradient(circle, rgba(200,16,46,0.16), transparent 70%);
}

.marca,
.sidebar nav,
.usuario-caja {
    position: relative;
    z-index: 1;
}

.marca {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px 18px;
}

.marca-icono {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #93f0d0 0%, #1ec88e 100%);
    box-shadow: 0 16px 28px -20px rgba(30, 200, 142, 0.9);
    flex: none;
}

.marca-icono span {
    position: absolute;
    display: block;
    background: rgba(7, 56, 39, 0.82);
    border-radius: 999px;
}

.marca-icono span:nth-child(1) {
    inset: 11px 9px 13px 9px;
    border-radius: 10px 12px 8px 8px;
}

.marca-icono span:nth-child(2) {
    width: 7px;
    height: 7px;
    left: 9px;
    bottom: 7px;
    background: #d7fff1;
}

.marca-icono span:nth-child(3) {
    width: 7px;
    height: 7px;
    right: 9px;
    bottom: 7px;
    background: #d7fff1;
}

.marca-titulo {
    font-size: 1.7rem;
    font-weight: 800;
    color: #ffffff;
}

.marca-subtitulo {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(224, 250, 241, 0.7);
}

.sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    margin-top: 4px;
}

.sidebar nav a {
    color: rgba(228, 249, 242, 0.84);
    padding: 13px 14px;
    border-radius: 18px;
    font-weight: 600;
    background: transparent;
    backdrop-filter: blur(0px);
    transform: translateX(0);
}

.sidebar nav a:hover {
    color: #ffffff;
    background: rgba(255,255,255,0.08);
    transform: translateX(4px);
}

.sidebar nav a.activo {
    color: #fff;
    background: linear-gradient(135deg, rgba(39, 211, 152,0.45), rgba(7, 111, 75,0.60));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 18px 24px -20px rgba(0,0,0,0.8);
}

.sidebar nav a.deshabilitado {
    opacity: 0.42;
    cursor: default;
    pointer-events: none;
}

.usuario-caja {
    margin-top: auto;
    padding: 18px 16px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.usuario-nombre {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
}

.usuario-rol {
    margin-top: 6px;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    color: rgba(226, 250, 242, 0.56);
}

/* Cerrar sesión: mismo formato que los items del nav pero en rojo */
.sidebar nav a.salir {
    display: block;
    margin-top: 0;
    gap: 0;
    color: #ff8a7a;
}
.sidebar nav a.salir:hover,
.sidebar nav a.salir.activo {
    color: #fff1ee;
    background: rgba(220, 76, 60, 0.28);
}

.salir {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: #ffd0c9;
    font-weight: 600;
}

.salir:hover {
    color: #fff1ee;
    transform: translateX(2px);
}

.contenido {
    padding: 16px;
}

.contenido-panel {
    min-height: calc(100dvh - 56px);
    background: var(--fondo-panel);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.72);
    border-radius: 34px;
    box-shadow: var(--sombra-xl);
    padding: 20px 28px;
    animation: aparecer-panel 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contenido-solo {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(10, 125, 86,0.09);
    border: 1px solid rgba(10, 125, 86,0.14);
    color: var(--acento-oscuro);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 800;
}

.subtitulo {
    color: var(--texto-suave);
    margin-top: 12px;
    max-width: 62ch;
}

.subtitulo-hero {
    font-size: 1.02rem;
    max-width: 56ch;
}

.panel-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.72fr);
    gap: 24px;
    align-items: stretch;
    margin-bottom: 30px;
}

.panel-hero-copy,
.panel-hero-resumen,
.tarjeta,
.login-caja,
.ficha-datos,
.observaciones,
.form-grid,
.campo-ancho,
.item-ficha,
.buscador-orden,
.tarjeta-reporte,
.tabla,
.reporte-sin-precio {
    background: var(--superficie);
    border: 1px solid rgba(255,255,255,0.75);
    box-shadow: var(--sombra-md);
    backdrop-filter: blur(16px);
}

.panel-hero-copy {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 34px;
}

.panel-hero-copy::after {
    content: "";
    position: absolute;
    inset: auto -10% -40% 36%;
    height: 220px;
    background: radial-gradient(circle, rgba(10, 125, 86,0.16), transparent 68%);
    pointer-events: none;
}

.panel-hero-resumen {
    border-radius: 28px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
}

.panel-hero-resumen::before {
    content: "";
    position: absolute;
    inset: -30% 40% auto auto;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(7, 91, 62,0.15), transparent 70%);
}

.resumen-pill {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(10, 125, 86,0.1);
    color: var(--acento-oscuro);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.resumen-cifra {
    position: relative;
    z-index: 1;
    margin-top: auto;
    font-family: "Outfit", sans-serif;
    font-size: clamp(3.3rem, 5vw, 5.1rem);
    line-height: 0.92;
    color: var(--acento-oscuro);
}

.resumen-texto {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    color: var(--texto-suave);
    max-width: 20ch;
}

.hero-acciones,
.encabezado-accion,
.form-acciones,
.reporte-acciones {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-acciones { margin-top: 26px; }

.metricas-grid,
.tarjetas-reportes {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}

.tarjeta {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 24px;
    min-height: 180px;
    transform: translateY(0);
    transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
    animation: aparecer-tarjeta 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.tarjeta::after {
    content: "";
    position: absolute;
    inset: auto -40px -56px auto;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(10, 125, 86,0.11), transparent 72%);
    transition: transform var(--transicion);
}

.tarjeta:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 44px -34px rgba(12, 77, 55, 0.42);
    border-color: rgba(10, 125, 86,0.16);
}

.tarjeta:hover::after {
    transform: scale(1.08);
}

.metricas-grid .tarjeta:nth-child(1) { grid-column: span 5; animation-delay: 60ms; }
.metricas-grid .tarjeta:nth-child(2) { grid-column: span 3; animation-delay: 110ms; }
.metricas-grid .tarjeta:nth-child(3) { grid-column: span 4; animation-delay: 160ms; }
.metricas-grid .tarjeta:nth-child(4) { grid-column: span 4; animation-delay: 210ms; }
.metricas-grid .tarjeta:nth-child(5) { grid-column: span 8; animation-delay: 260ms; }

.tarjeta-destacada,
.tarjeta-fotos {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.tarjeta-kicker {
    margin-bottom: auto;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}

.tarjeta-numero {
    font-family: "Outfit", sans-serif;
    font-size: clamp(3rem, 4vw, 4.6rem);
    font-weight: 800;
    line-height: 0.92;
    color: var(--acento-oscuro);
}

.tarjeta-etiqueta {
    margin-top: 10px;
    color: var(--texto);
    font-size: 1rem;
    font-weight: 700;
}

.tarjeta-descripcion,
.nota,
.muted,
.tarjeta-reporte-desc {
    color: var(--texto-suave);
    font-size: 0.92rem;
}

.login-caja {
    border-radius: 30px;
    padding: 38px;
    width: min(420px, 100%);
}

.login-caja h1 { margin: 0 0 6px; }

.login-caja form {
    display: flex;
    flex-direction: column;
    margin-top: 22px;
}

.login-caja label,
.form-grid label,
.campo-ancho,
.buscador-orden label,
.filtros label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--texto-suave);
}

.login-caja input,
.form-grid input,
.form-grid select,
.campo-ancho textarea,
.filtros input,
.filtros select,
.form-item-nuevo input,
.form-item-nuevo select,
.buscador-orden input,
.boton-foto input[type="file"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(20, 108, 78,0.12);
    border-radius: 16px;
    background: rgba(255,255,255,0.9);
    color: var(--texto);
    transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}

textarea { min-height: 116px; resize: vertical; }

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: rgba(10, 125, 86,0.42);
    box-shadow: 0 0 0 4px rgba(10, 125, 86,0.12);
    transform: translateY(-1px);
}

.alerta-error {
    background: rgba(253,236,234,0.88);
    color: var(--rojo);
    padding: 12px 14px;
    border-radius: 16px;
    margin-top: 16px;
    font-size: 0.92rem;
    border: 1px solid rgba(182,61,51,0.12);
}

.alerta-exito {
    background: rgba(221, 250, 240,0.88);
    color: #11885f;
    padding: 12px 14px;
    border-radius: 16px;
    margin-top: 16px;
    font-size: 0.92rem;
    border: 1px solid rgba(17, 136, 95,0.16);
}

.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
    margin: 24px 0;
}

.filtros button,
.form-item-nuevo button,
.form-acciones button,
.login-caja button,
.boton-primario,
.boton-secundario,
.boton-peligro,
.boton-foto,
.boton-foto-enviar,
.paginacion a,
.paginacion .pagina-actual {
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    transition: transform var(--transicion), box-shadow var(--transicion), background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}

.filtros button::before,
.form-item-nuevo button::before,
.form-acciones button::before,
.login-caja button::before,
.boton-primario::before,
.boton-secundario::before,
.boton-peligro::before,
.boton-foto::before,
.boton-foto-enviar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.22), transparent 80%);
    transform: translateX(-120%);
    transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.filtros button:hover::before,
.form-item-nuevo button:hover::before,
.form-acciones button:hover::before,
.login-caja button:hover::before,
.boton-primario:hover::before,
.boton-secundario:hover::before,
.boton-peligro:hover::before,
.boton-foto:hover::before,
.boton-foto-enviar:hover::before {
    transform: translateX(120%);
}

.filtros button:hover,
.form-item-nuevo button:hover,
.form-acciones button:hover,
.login-caja button:hover,
.boton-primario:hover,
.boton-secundario:hover,
.boton-peligro:hover,
.boton-foto:hover,
.boton-foto-enviar:hover,
.paginacion a:hover {
    transform: translateY(-2px);
}

.filtros button:active,
.form-item-nuevo button:active,
.form-acciones button:active,
.login-caja button:active,
.boton-primario:active,
.boton-secundario:active,
.boton-peligro:active,
.boton-foto:active,
.boton-foto-enviar:active,
.paginacion a:active {
    transform: translateY(0) scale(0.985);
}

.filtros button,
.form-item-nuevo button,
.form-acciones button,
.login-caja button,
.boton-primario,
.boton-foto,
.boton-foto-enviar {
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--acento-oscuro), var(--acento));
    color: #ffffff;
    border: 1px solid transparent;
    cursor: pointer;
    box-shadow: 0 18px 26px -22px rgba(10, 125, 86,0.95);
}

.boton-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    background: rgba(255,255,255,0.82);
    color: var(--acento-oscuro);
    border: 1px solid rgba(10, 125, 86,0.14);
    box-shadow: 0 14px 24px -22px rgba(12, 74, 53,0.42);
}

.boton-peligro {
    background: rgba(253,236,234,0.92);
    color: var(--rojo);
    border: 1px solid rgba(182,61,51,0.14);
    padding: 10px 16px;
    cursor: pointer;
}

.tabla-scroll {
    overflow-x: auto;
    margin-top: 16px;
    border-radius: 26px;
}

.tabla {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 26px;
    overflow: hidden;
    font-size: 0.92rem;
}

.tabla th,
.tabla td {
    padding: 13px 14px;
    border-bottom: 1px solid rgba(20, 108, 78,0.08);
    text-align: left;
    white-space: nowrap;
}

.tabla thead th {
    background: rgba(242, 252, 248,0.92);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--texto-suave);
}

.tabla tbody tr {
    transition: background-color var(--transicion), transform var(--transicion);
}

.tabla tbody tr:hover { background: rgba(227, 249, 241, 0.45); }

.fila-sin-registro { opacity: 0.72; }

.badge {
    display: inline-block;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: #e2f7f0;
    color: var(--texto);
}

.badge-alerta { background: #fdecea; color: var(--rojo); }
.badge-entregada,
.badge-terminada,
.badge-finalizada { background: #dff8ef; color: #13845e; }
.badge-cerrada,
.badge-cancelada,
.badge-anulada { background: #eef0f2; color: #5a6472; }
.badge-reproceso { background: #fdecea; color: #c0392b; }
.badge-en-proceso,
.badge-proceso { background: #e3edfd; color: #1d5fc7; }
.badge-programada { background: #fff6d6; color: #8a6d00; }
.badge-ingresada { background: #eef1f4; color: #69737d; }
.badge-no-atender { background: #fdecea; color: var(--rojo); }

.paginacion {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.paginacion a,
.paginacion .pagina-actual {
    padding: 8px 14px;
    border: 1px solid rgba(20, 108, 78,0.12);
    font-size: 0.85rem;
    background: rgba(255,255,255,0.88);
}

.paginacion .pagina-actual {
    background: linear-gradient(135deg, var(--acento-oscuro), var(--acento));
    color: #fff;
    border-color: transparent;
}

.ficha-datos,
.form-grid,
.campo-ancho,
.item-ficha,
.observaciones,
.buscador-orden,
.tarjeta-reporte,
.reporte-sin-precio {
    border-radius: 28px;
}

.ficha-datos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    padding: 22px;
    margin-top: 16px;
}

.ficha-datos > div,
.galeria,
.galeria-grupo,
.form-grid label,
.campo-ancho,
.buscador-orden label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.etiqueta,
.galeria-etiqueta {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--texto-tenue);
    font-weight: 800;
}

.observaciones {
    margin-top: 16px;
    padding: 14px 18px;
}

.galeria-fotos {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.miniatura {
    display: inline-block;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(20, 108, 78,0.12);
    box-shadow: 0 12px 24px -24px rgba(12, 74, 53,0.55);
}

.miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tabs {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(20, 108, 78,0.1);
    overflow-x: auto;
}

.tab {
    padding: 10px 16px;
    color: var(--texto-suave);
    border-radius: 999px;
    font-size: 0.92rem;
    white-space: nowrap;
    transition: background-color var(--transicion), color var(--transicion), transform var(--transicion);
}

.tab:hover {
    background: rgba(10, 125, 86,0.08);
    color: var(--acento-oscuro);
}

.tab-activo {
    background: rgba(10, 125, 86,0.12);
    color: var(--acento-oscuro);
    font-weight: 700;
}

.encabezado-accion {
    justify-content: space-between;
    margin-bottom: 4px;
}

.form-orden { margin-top: 22px; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    padding: 22px;
}

.campo-ancho {
    margin-top: 16px;
    padding: 18px 20px;
}

.form-acciones { margin-top: 22px; }

.form-item-nuevo {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0;
}

.form-item-nuevo input,
.form-item-nuevo select {
    flex: 1;
    min-width: 160px;
}

.item-ficha {
    padding: 18px 20px;
    margin-top: 16px;
}

.item-atenuado { opacity: 0.52; }

.form-atender { display: inline-flex; }

.check-atender {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    cursor: pointer;
    white-space: nowrap;
}

.item-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.item-meta {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 0.88rem;
    color: var(--texto-suave);
}

.miniatura-caja { position: relative; display: inline-block; }

.boton-mini-eliminar {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    line-height: 20px;
    border-radius: 50%;
    background: var(--rojo);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0;
    box-shadow: 0 12px 22px -12px rgba(182,61,51,0.7);
}

.form-foto {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.boton-foto {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    cursor: pointer;
}

.boton-foto input[type="file"] {
    max-width: 190px;
    font-size: 0.76rem;
}

.tarjetas-reportes {
    margin-top: 24px;
}

.tarjeta-reporte {
    display: block;
    grid-column: span 4;
    padding: 22px;
    color: var(--texto);
    transition: transform var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}

.tarjeta-reporte:hover {
    transform: translateY(-4px);
    border-color: rgba(10, 125, 86,0.18);
    box-shadow: 0 24px 36px -28px rgba(12, 77, 55, 0.4);
}

.tarjeta-reporte-titulo {
    font-weight: 800;
    color: var(--acento-oscuro);
    margin-bottom: 8px;
}

.buscador-orden {
    display: flex;
    gap: 12px;
    align-items: end;
    margin-top: 20px;
    padding: 20px;
    max-width: 460px;
}

.reporte-total {
    font-weight: 800;
    font-size: 1.08rem;
    margin-top: 16px;
    text-align: right;
}

.reporte-total .valor { color: var(--acento-oscuro); }

.reporte-grupo-titulo {
    font-weight: 800;
    margin-top: 24px;
    margin-bottom: 8px;
    color: var(--acento-oscuro);
}

.reporte-subtotal { text-align: right; font-weight: 700; margin-top: 4px; }

.reporte-sin-precio {
    margin-top: 24px;
    border: 1px solid rgba(182,61,51,0.12);
    padding: 18px 20px;
    background: rgba(253,236,234,0.8);
}

.reporte-sin-precio h3 {
    margin: 0 0 8px;
    color: var(--rojo);
    font-size: 0.98rem;
}

.texto-derecha { text-align: right; }

@keyframes aparecer-panel {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes aparecer-tarjeta {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1180px) {
    .panel-hero,
    .metricas-grid {
        grid-template-columns: 1fr;
    }

    .metricas-grid .tarjeta,
    .tarjeta-reporte {
        grid-column: span 1;
    }
}

@media (max-width: 900px) {
    .layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(300px, 86vw);
        min-height: 100dvh;
        border-radius: 0 28px 28px 0;
        transform: translateX(-100%);
        transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 80;
        pointer-events: none;
    }

    html[data-sidebar="abierto"] .sidebar {
        transform: translateX(0);
        box-shadow: var(--sombra-xl);
        pointer-events: auto;
    }

    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(6, 37, 26, 0.45);
        z-index: 70;
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms ease;
    }

    html[data-sidebar="abierto"] .sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .contenido {
        padding: 16px;
    }

    .contenido-panel {
        min-height: auto;
        padding: 24px;
        border-radius: 28px;
    }
}

@media (max-width: 720px) {
    h1 {
        font-size: clamp(2.4rem, 12vw, 3.2rem);
    }

    .sidebar {
        padding: 16px;
    }

    .marca {
        width: 100%;
        padding: 6px 4px 8px;
    }

    .sidebar nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .sidebar nav a {
        padding: 10px 12px;
        font-size: 0.88rem;
    }

    .usuario-caja {
        width: 100%;
    }

    .contenido-panel {
        padding: 20px;
    }

    .hero-acciones,
    .encabezado-accion,
    .form-acciones,
    .reporte-acciones,
    .filtros,
    .form-item-nuevo,
    .form-foto,
    .buscador-orden {
        flex-direction: column;
        align-items: stretch;
    }

    .boton-primario,
    .boton-secundario,
    .filtros button,
    .form-item-nuevo button,
    .form-acciones button,
    .login-caja button,
    .boton-foto,
    .boton-foto-enviar,
    .buscador-orden input {
        width: 100%;
    }

    .ficha-datos,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .item-cabecera {
        flex-direction: column;
        align-items: flex-start;
    }

    .tabla {
        font-size: 0.82rem;
    }
}

/* --- Login premium / escena animada --- */
.login-escena {
    position: relative;
    width: min(1280px, 100%);
    min-height: min(900px, calc(100dvh - 48px));
    border-radius: 40px;
    overflow: hidden;
    background: rgba(255,255,255,0.52);
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0 34px 80px -42px rgba(8, 68, 47, 0.42);
    backdrop-filter: blur(22px);
}

.login-fondo {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(98, 237, 189, 0.22), transparent 24%),
        radial-gradient(circle at 80% 22%, rgba(9, 108, 74, 0.18), transparent 22%),
        radial-gradient(circle at 60% 80%, rgba(20, 135, 95, 0.14), transparent 24%),
        linear-gradient(135deg, rgba(247, 254, 252,0.94), rgba(235, 250, 245,0.82));
}

.blob,
.grid-luz {
    position: absolute;
    display: block;
    pointer-events: none;
}

.blob {
    border-radius: 50%;
    filter: blur(14px);
    opacity: 0.78;
    animation: blob-float 16s ease-in-out infinite;
}

.blob-a {
    width: 380px;
    height: 380px;
    top: -90px;
    left: -80px;
    background: radial-gradient(circle, rgba(73, 228, 175, 0.28), transparent 68%);
}

.blob-b {
    width: 340px;
    height: 340px;
    right: -90px;
    top: 18%;
    background: radial-gradient(circle, rgba(21, 158, 111, 0.24), transparent 66%);
    animation-delay: -6s;
}

.blob-c {
    width: 320px;
    height: 320px;
    left: 46%;
    bottom: -120px;
    background: radial-gradient(circle, rgba(71, 232, 177, 0.2), transparent 66%);
    animation-delay: -10s;
}

.grid-luz {
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.46) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.46) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: radial-gradient(circle at center, black 34%, transparent 86%);
    opacity: 0.46;
    animation: grid-drift 18s linear infinite;
}

.login-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
    gap: 28px;
    align-items: center;
    min-height: min(900px, calc(100dvh - 48px));
    padding: 42px;
}

.login-story {
    padding: 24px 12px 24px 20px;
    animation: aparecer-panel 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.login-titulo-display {
    max-width: 9ch;
    margin: 0;
    font-size: clamp(3.4rem, 6vw, 5.6rem);
    line-height: 0.92;
    color: #13233a;
}

.login-texto {
    margin-top: 22px;
    max-width: 54ch;
    font-size: 1.02rem;
    color: var(--texto-suave);
}

.login-puntos {
    display: grid;
    gap: 14px;
    margin-top: 26px;
    max-width: 620px;
}

.login-punto {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 16px 18px;
    border-radius: 24px;
    background: rgba(255,255,255,0.4);
    border: 1px solid rgba(255,255,255,0.64);
    box-shadow: 0 18px 28px -26px rgba(12, 74, 53, 0.36);
    backdrop-filter: blur(12px);
}

.login-punto-icono {
    width: 12px;
    height: 12px;
    margin-top: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1fd697, #086c4a);
    box-shadow: 0 0 0 6px rgba(31, 214, 151, 0.12);
}

.login-punto strong {
    display: block;
    color: #16304d;
    font-size: 0.98rem;
}

.login-punto p {
    margin: 4px 0 0;
    color: var(--texto-suave);
    font-size: 0.92rem;
}

.login-caja-premium {
    position: relative;
    overflow: hidden;
    width: min(100%, 520px);
    margin-left: auto;
    padding: 34px;
    border-radius: 34px;
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.92);
    box-shadow: 0 34px 70px -42px rgba(10, 71, 50, 0.46);
}

.login-caja-premium::after {
    content: "";
    position: absolute;
    inset: auto -50px -80px auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(21, 194, 134, 0.16), transparent 66%);
    pointer-events: none;
}

.login-marca-superior {
    display: flex;
    align-items: center;
    gap: 16px;
}

.login-bus-icono {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 24px;
    background: linear-gradient(135deg, #8af5d0 0%, #45f1b6 100%);
    box-shadow: 0 24px 36px -26px rgba(25, 211, 147, 0.65);
    flex: none;
}

.login-bus-icono span {
    position: absolute;
    display: block;
    background: rgba(13, 77, 55, 0.88);
    border-radius: 999px;
}

.login-bus-icono span:nth-child(1) {
    inset: 22px 16px 24px 16px;
    border-radius: 14px 16px 10px 10px;
}

.login-bus-icono span:nth-child(2),
.login-bus-icono span:nth-child(3) {
    width: 11px;
    height: 11px;
    bottom: 12px;
    background: #f5fffc;
}

.login-bus-icono span:nth-child(2) { left: 16px; }
.login-bus-icono span:nth-child(3) { right: 16px; }

.login-brand {
    font-family: "Outfit", sans-serif;
    font-size: clamp(2.6rem, 5vw, 4rem);
    line-height: 0.94;
    font-weight: 800;
    color: #17263c;
    letter-spacing: -0.05em;
}

.login-brand-sub {
    margin-top: 6px;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--texto-tenue);
}

.login-caja-premium h2 {
    margin: 24px 0 6px;
    font-size: 1.6rem;
    color: #17304b;
}

.login-intro {
    margin: 0 0 18px;
    color: var(--texto-suave);
}

.login-form {
    margin-top: 12px;
}

.login-submit {
    width: 100%;
    min-height: 58px;
    justify-content: center;
}

.login-submit-texto,
.login-submit-cargando {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: opacity 180ms ease, transform 180ms ease;
}

.login-submit-cargando {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(8px);
}

.login-submit.is-loading {
    pointer-events: none;
    filter: saturate(0.92);
}

.login-submit.is-loading .login-submit-texto {
    opacity: 0;
    transform: translateY(-8px);
}

.login-submit.is-loading .login-submit-cargando {
    opacity: 1;
    transform: translateY(0);
}

.loader-orbita {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.34);
    border-top-color: #ffffff;
    animation: spin-loader 0.82s linear infinite;
}

@keyframes blob-float {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33% { transform: translate3d(18px, 26px, 0) scale(1.05); }
    66% { transform: translate3d(-14px, 12px, 0) scale(0.96); }
}

@keyframes grid-drift {
    0% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(12px, 10px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes spin-loader {
    to { transform: rotate(360deg); }
}

@media (max-width: 1100px) {
    .login-layout {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .login-story {
        padding: 8px 0 0;
    }

    .login-titulo-display {
        max-width: 12ch;
    }

    .login-caja-premium {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 720px) {
    .login-escena {
        min-height: calc(100dvh - 24px);
        border-radius: 28px;
    }

    .login-layout {
        gap: 18px;
        padding: 18px;
        min-height: calc(100dvh - 24px);
    }

    .login-story {
        padding: 6px 4px 0;
    }

    .login-titulo-display {
        font-size: clamp(2.6rem, 12vw, 3.4rem);
        max-width: 10ch;
    }

    .login-texto {
        font-size: 0.96rem;
    }

    .login-caja-premium {
        padding: 24px 20px;
        border-radius: 28px;
    }

    .login-marca-superior {
        gap: 12px;
    }

    .login-bus-icono {
        width: 64px;
        height: 64px;
        border-radius: 20px;
    }

    .login-brand {
        font-size: clamp(2.2rem, 10vw, 3rem);
    }
}

/* --- Login minimal purple override --- */
.contenido-solo {
    padding: 0;
}

.login-minimal {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(255,255,255,0.08), transparent 30%),
        linear-gradient(180deg, #6b00a8 0%, #53007f 42%, #430066 68%, #6e0148 100%);
}

.login-minimal-fondo {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.login-orbe {
    position: absolute;
    border-radius: 50%;
    filter: blur(18px);
    opacity: 0.38;
    animation: login-purple-float 14s ease-in-out infinite;
}

.login-orbe-a {
    width: 420px;
    height: 420px;
    top: -120px;
    left: -120px;
    background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 68%);
}

.login-orbe-b {
    width: 340px;
    height: 340px;
    right: -80px;
    bottom: 10%;
    background: radial-gradient(circle, rgba(255,80,220,0.32), transparent 68%);
    animation-delay: -4s;
}

.login-orbe-c {
    width: 280px;
    height: 280px;
    left: 50%;
    top: 18%;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.22), transparent 70%);
    animation-delay: -8s;
}

.login-minimal-card {
    position: relative;
    z-index: 1;
    width: min(100%, 360px);
    padding: 42px 28px 28px;
    border-radius: 26px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 30px 70px -42px rgba(0, 28, 18, 0.72);
    backdrop-filter: blur(6px);
}

.login-avatar {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto 30px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ea1dd9 0%, #b002d0 100%);
    box-shadow: 0 18px 36px -24px rgba(255, 61, 234, 0.82);
}

.login-avatar-head,
.login-avatar-body {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid rgba(255,255,255,0.92);
}

.login-avatar-head {
    top: 13px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.login-avatar-body {
    top: 31px;
    width: 28px;
    height: 14px;
    border-radius: 14px 14px 8px 8px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.alerta-error-login {
    margin-bottom: 18px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: #ffe3f8;
}

.login-minimal-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.login-linea-campo {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 12px;
    align-items: end;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(237, 202, 255, 0.62);
}

.login-linea-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    color: rgba(255,255,255,0.9);
    font-size: 0.95rem;
    font-weight: 700;
}

.login-linea-inputs {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.login-linea-label {
    color: rgba(245, 225, 255, 0.86);
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

.login-linea-campo input {
    padding: 2px 0 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    box-shadow: none;
}

.login-linea-campo input:focus {
    border: none;
    box-shadow: none;
    transform: none;
}

.login-linea-campo input::placeholder {
    color: rgba(255,255,255,0.42);
}

.login-minimal-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
    color: rgba(245, 225, 255, 0.88);
    font-size: 0.72rem;
}

.login-recordarme {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.login-recordarme input {
    accent-color: #e81ddb;
}

.login-forgot {
    opacity: 0.82;
}

.login-submit-minimal {
    width: 100%;
    min-height: 48px;
    margin-top: 6px;
    background: linear-gradient(180deg, #dd1cd7 0%, #bb0fbf 100%);
    border: none;
    border-radius: 0;
    box-shadow: 0 22px 34px -30px rgba(255, 35, 224, 0.72);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.82rem;
}

.login-submit-minimal:hover {
    transform: translateY(-1px);
}

.login-registro-falso {
    margin-top: 18px;
    padding: 12px 18px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255,255,255,0.72);
    background: linear-gradient(180deg, rgba(243, 23, 214, 0.28) 0%, rgba(113, 4, 85, 0.24) 100%);
}

@keyframes login-purple-float {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33% { transform: translate3d(18px, -14px, 0) scale(1.05); }
    66% { transform: translate3d(-16px, 16px, 0) scale(0.96); }
}

@media (max-width: 640px) {
    .login-minimal-card {
        width: min(100%, 340px);
        padding: 34px 22px 22px;
    }
}

/* --- Login minimal recolor: Payport palette override --- */
.login-minimal {
    background:
        radial-gradient(circle at top, rgba(107, 237, 192, 0.10), transparent 28%),
        linear-gradient(180deg, #0d593f 0%, #0a4f37 42%, #084530 68%, #0e5e43 100%);
}

.login-orbe-a {
    background: radial-gradient(circle, rgba(118, 241, 199, 0.16), transparent 68%);
}

.login-orbe-b {
    background: radial-gradient(circle, rgba(28, 194, 137, 0.22), transparent 68%);
}

.login-orbe-c {
    background: radial-gradient(circle, rgba(56, 222, 165, 0.18), transparent 70%);
}

.login-minimal-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(116, 237, 196, 0.08);
    box-shadow: 0 30px 70px -42px rgba(2, 32, 22, 0.82);
}

.login-avatar {
    background: linear-gradient(180deg, #3ae3a9 0%, #128d63 100%);
    box-shadow: 0 18px 36px -24px rgba(58, 227, 169, 0.62);
}

.alerta-error-login {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    color: #ffd7d2;
}

.login-linea-campo {
    border-bottom: 1px solid rgba(203, 247, 232, 0.72);
}

.login-linea-icono,
.login-linea-label,
.login-minimal-meta {
    color: rgba(234, 251, 245, 0.92);
}

.login-linea-campo input,
.login-linea-campo input::placeholder,
.login-recordarme span,
.login-forgot {
    color: #ffffff;
}

.login-recordarme input {
    accent-color: #40e3ab;
}

.login-submit-minimal {
    background: linear-gradient(180deg, #1cc289 0%, #0e7d57 100%);
    box-shadow: 0 22px 34px -30px rgba(28, 194, 137, 0.72);
}

.login-registro-falso {
    color: rgba(227, 250, 242, 0.72);
    background: linear-gradient(180deg, rgba(28, 194, 137, 0.28) 0%, rgba(8, 82, 56, 0.30) 100%);
}

/* --- Login template-faithful override with Payport colors --- */
.login-template-card {
    width: min(100%, 540px);
    padding: 64px 42px 34px;
    border-radius: 36px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(105, 237, 192, 0.10);
    box-shadow: 0 36px 80px -46px rgba(1, 24, 16, 0.88);
}

.login-template-form {
    gap: 26px;
}

.login-template-field {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(210, 247, 234, 0.78);
}

.login-template-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: rgba(228, 250, 242, 0.96);
    margin-bottom: 4px;
}

.login-template-svg svg {
    width: 24px;
    height: 24px;
    display: block;
}

.login-template-field .login-linea-label {
    font-size: 0.94rem;
    color: rgba(230, 250, 243, 0.92);
}

.login-template-field input {
    font-size: 1.04rem;
    letter-spacing: 0.01em;
}

.login-template-meta {
    margin-top: 0;
    font-size: 0.8rem;
}

.login-template-meta .login-recordarme span,
.login-template-meta .login-forgot {
    color: rgba(222, 248, 239, 0.84);
}

.login-template-meta .login-recordarme input {
    width: 15px;
    height: 15px;
}

.login-submit-minimal {
    min-height: 58px;
    margin-top: 2px;
    font-size: 0.9rem;
    letter-spacing: 0.18em;
}

.login-registro-falso {
    margin-top: 16px;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.18em;
    font-size: 0.9rem;
}

@media (max-width: 640px) {
    .login-template-card {
        width: min(100%, 360px);
        padding: 42px 24px 24px;
        border-radius: 28px;
    }

    .login-template-field {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 14px;
    }

    .login-template-meta {
        font-size: 0.74rem;
    }
}

/* --- Login cleanup tweaks requested --- */
.login-template-card {
    width: min(100%, 460px);
    padding: 52px 34px 28px;
    border: none;
    background: rgba(255,255,255,0.015);
    box-shadow: 0 28px 56px -40px rgba(1, 24, 16, 0.92);
}

.login-template-field {
    border-bottom: 2px solid rgba(210, 247, 234, 0.7);
}

.login-template-field .login-linea-inputs {
    min-width: 0;
}

.login-template-field input {
    width: 100%;
    background: transparent !important;
    color: #f3fefa !important;
    border: none !important;
    box-shadow: none !important;
    outline: none;
    padding: 2px 0 0;
    font-size: 1.02rem;
    font-weight: 500;
    -webkit-text-fill-color: #f3fefa;
    caret-color: #6bedc0;
}

.login-template-field input:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.login-template-field input::selection {
    background: rgba(107, 237, 192, 0.24);
}

.login-password-wrap {
    width: 100%;
}

.login-password-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 10px;
    align-items: center;
}

.login-password-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(230, 250, 243, 0.82);
    cursor: pointer;
    box-shadow: none;
    border-radius: 50%;
    transition: color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.login-password-toggle:hover {
    color: #ffffff;
    transform: scale(1.05);
}

.login-password-toggle.is-active {
    color: #6bedc0;
}

.login-password-toggle svg {
    width: 20px;
    height: 20px;
    display: block;
}

@media (max-width: 640px) {
    .login-template-card {
        width: min(100%, 360px);
        padding: 40px 24px 22px;
    }
}

/* --- Home redesign inspired by smart dashboard reference --- */
.smart-home-board {
    display: grid;
    gap: 12px;
}

.smart-home-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(104, 230, 187, 0.18);
}

.smart-home-greeting {
    font-size: 0.85rem;
    color: #56738a;
    font-weight: 600;
}

.smart-home-topbar h1 {
    margin-top: 2px;
    font-size: clamp(1.5rem, 2vw, 2.1rem);
    color: #17304b;
}

.smart-home-topbar p {
    max-width: 58ch;
    margin: 4px 0 0;
    color: #65819a;
    font-size: 0.9rem;
}

.smart-home-topicons {
    display: flex;
    gap: 12px;
    padding-top: 10px;
}

.smart-home-topicons span {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(218, 250, 239, 0.68);
    color: #5c8092;
    font-size: 1rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
}

.smart-grid-principal {
    display: grid;
    grid-template-columns: 2.15fr 0.92fr 1.32fr;
    gap: 18px;
}

.smart-stack-columna {
    display: grid;
    gap: 18px;
}

.smart-panel {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 28px 36px -32px rgba(8, 63, 44, 0.26);
    border: 1px solid rgba(226, 248, 240, 0.88);
}

.smart-panel-kicker,
.smart-section-title {
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 800;
    color: #7892aa;
}

.smart-panel-hero {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 1.15fr;
    min-height: 230px;
}

.smart-hero-visual {
    position: relative;
    min-height: 150px;
    background: linear-gradient(180deg, #9ff1d5 0%, #28d298 52%, #098f61 100%);
}

.smart-hero-visual::before,
.smart-control-side::before {
    content: "";
    position: absolute;
    top: 0;
    right: -64px;
    width: 90px;
    height: 100%;
    background: #ffffff;
    border-radius: 50% 0 0 50%;
    z-index: -1;
}

.smart-hero-shape {
    position: absolute;
    inset: auto -24% -36% auto;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.34), transparent 68%);
}

.smart-hero-avatar {
    position: absolute;
    left: 44px;
    bottom: 28px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ebfff8, #cafaea);
    box-shadow: 0 18px 26px -18px rgba(4, 90, 60, 0.42);
}

.smart-hero-avatar span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #127a56;
    opacity: 0.9;
}

.smart-hero-avatar span:first-child {
    top: 24px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
}

.smart-hero-avatar span:last-child {
    bottom: 24px;
    width: 74px;
    height: 44px;
    border-radius: 42px 42px 18px 18px;
}

.smart-hero-copy {
    position: relative;
    z-index: 1;
    padding: 16px 20px 14px 14px;
}

.smart-big-number {
    margin-top: 6px;
    font-family: "Outfit", sans-serif;
    font-size: clamp(2.2rem, 3vw, 3rem);
    line-height: 0.92;
    color: #173c55;
}

.smart-big-label {
    margin-top: 8px;
    font-size: 1.28rem;
    font-weight: 700;
    color: #137151;
}

.smart-hero-copy p {
    margin-top: 12px;
    color: #6d879a;
    max-width: 26ch;
}

.smart-panel-gauge {
    padding: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.smart-gauge {
    --pct: 40;
    width: 108px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(#098f61 calc(var(--pct) * 1%), #ffd166 0%, #def5ed 0%);
    display: grid;
    place-items: center;
    box-shadow: inset 0 0 0 10px rgba(255,255,255,0.52);
}

.smart-gauge-inner {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: #f9fffd;
    display: grid;
    place-items: center;
    color: #d14f58;
    box-shadow: inset 0 0 0 10px rgba(211, 247, 234, 0.7);
}

.smart-gauge-inner strong {
    font-size: 1.6rem;
    font-family: "Outfit", sans-serif;
}

.smart-gauge-caption {
    text-align: center;
    color: #7690a6;
    font-size: 0.88rem;
    max-width: 16ch;
}

.smart-control-card {
    display: grid;
    grid-template-columns: 140px 1fr;
    min-height: 104px;
}

.smart-control-side {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #9ff1d5 0%, #1ec88e 100%);
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.smart-control-main {
    position: relative;
    z-index: 1;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.smart-control-main strong {
    font-size: 2.3rem;
    line-height: 1;
    font-family: "Outfit", sans-serif;
    color: #d0505b;
}

.smart-control-main span {
    color: #618094;
    font-weight: 600;
}

.smart-slider {
    height: 30px;
    border-radius: 18px;
    background: linear-gradient(180deg, #59fac3 0%, #4bf5bb 100%);
    padding: 11px 14px;
    margin-top: 2px;
}

.smart-slider i {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: #77f5ca;
    min-width: 18px;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.14) inset;
}

.smart-grid-secundario {
    display: grid;
    grid-template-columns: 1.2fr 1.6fr;
    gap: 18px;
}

.smart-listado-panel,
.smart-chart-panel {
    padding: 22px;
}

.smart-room-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.smart-room-item {
    display: grid;
    grid-template-columns: 84px 1.2fr auto auto;
    align-items: center;
    gap: 14px;
    min-height: 62px;
    border-radius: 18px;
    background: linear-gradient(180deg, #f7fffc 0%, #edfcf7 100%);
    box-shadow: 0 16px 24px -24px rgba(12, 82, 58, 0.45);
    padding-right: 16px;
    color: inherit;
}

.smart-room-icon {
    position: relative;
    /* stacking context propio: el ::after con z-index -1 queda sobre el degradado pero bajo el texto */
    z-index: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.15rem;
    background: linear-gradient(180deg, #93f0d0 0%, #098f61 100%);
    border-radius: 18px 0 0 18px;
}

.smart-room-icon::after {
    content: "";
    position: absolute;
    top: 0;
    right: -18px;
    width: 36px;
    height: 100%;
    background: #f1fdf9;
    border-radius: 50% 0 0 50%;
    z-index: -1;
}

.smart-room-name,
.smart-room-value {
    position: relative;
    z-index: 1;
}

.smart-room-name {
    color: #57f7c0;
    font-size: 1.02rem;
    font-weight: 600;
}

.smart-room-value {
    color: #d14f58;
    font-family: "Outfit", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
}

.smart-switch {
    width: 54px;
    height: 28px;
    background: #d3f4e9;
    border-radius: 999px;
    position: relative;
}

.smart-switch::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #8fe0c4;
    transition: transform var(--transicion);
}

.smart-switch.is-on {
    background: rgba(83, 251, 193, 0.16);
}

.smart-switch.is-on::after {
    transform: translateX(26px);
    background: #59fac3;
}

.smart-chart {
    margin-top: 16px;
}

.smart-bars {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    align-items: end;
    min-height: 220px;
    padding: 20px 4px 8px;
    border-left: 3px solid #aee8d4;
    border-bottom: 3px solid #aee8d4;
    background: linear-gradient(180deg, transparent 0%, transparent 24%, rgba(161, 232, 207, 0.18) 24%, rgba(161, 232, 207, 0.18) 25%, transparent 25%, transparent 49%, rgba(161, 232, 207, 0.18) 49%, rgba(161, 232, 207, 0.18) 50%, transparent 50%, transparent 74%, rgba(161, 232, 207, 0.18) 74%, rgba(161, 232, 207, 0.18) 75%, transparent 75%);
}

.smart-bars span {
    height: calc(var(--value) * 1.7px + 18px);
    border-radius: 18px 18px 6px 6px;
    background: linear-gradient(180deg, #93f0d0 0%, #098f61 100%);
    box-shadow: 0 16px 24px -22px rgba(77, 255, 194, 0.55);
}

.smart-bars span:nth-child(2n) {
    background: linear-gradient(180deg, #ff7c7c 0%, #de5962 100%);
}

.smart-chart-labels {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 12px;
    color: #93a7b7;
    font-size: 0.84rem;
    text-align: center;
}

.smart-grid-terciario {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.smart-mini-device {
    border-radius: 24px;
    padding: 20px 16px;
    background: linear-gradient(180deg, #f6fefb 0%, #eafaf5 100%);
    text-align: center;
    box-shadow: 0 18px 28px -28px rgba(8, 63, 44, 0.4);
}

.smart-mini-device.active-device {
    background: linear-gradient(180deg, #f0fcf8 0%, #dcf9ef 100%);
}

.smart-device-icon {
    width: 66px;
    height: 66px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #93f0d0 0%, #098f61 100%);
    color: #ffffff;
    font-size: 1.4rem;
}

.smart-device-title {
    font-size: 1rem;
    font-weight: 700;
    color: #53f5bd;
}

.smart-device-sub {
    margin-top: 6px;
    color: #90a6b6;
    font-size: 0.88rem;
}

@media (max-width: 1280px) {
    .smart-grid-principal {
        grid-template-columns: 1.45fr 0.9fr;
    }

    .smart-stack-columna {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, 1fr);
    }

    .smart-grid-secundario,
    .smart-grid-terciario {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 980px) {
    .smart-home-topbar,
    .smart-grid-principal,
    .smart-grid-secundario,
    .smart-grid-terciario,
    .smart-panel-hero,
    .smart-stack-columna {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .smart-home-topbar {
        display: grid;
    }

    .smart-control-card,
    .smart-room-item {
        grid-template-columns: 1fr;
    }

    .smart-control-side,
    .smart-room-icon {
        min-height: 70px;
        border-radius: 18px 18px 0 0;
    }

    .smart-control-side::before,
    .smart-room-icon::after,
    .smart-hero-visual::before {
        display: none;
    }

    .smart-hero-copy {
        padding: 24px;
    }

    .smart-grid-terciario {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .smart-grid-terciario,
    .smart-chart-labels,
    .smart-bars {
        grid-template-columns: 1fr 1fr;
    }

    .smart-chart-labels span:nth-child(n+3),
    .smart-bars span:nth-child(n+3) {
        display: none;
    }

    .smart-template-card,
    .smart-panel {
        border-radius: 22px;
    }
}

/* --- Compact home + load animations tuning --- */
.smart-home-board-compact {
    gap: clamp(8px, 1vh, 14px);
}

.smart-home-topbar-compact {
    padding-bottom: clamp(6px, 1vh, 12px);
    gap: 14px;
}

.smart-home-topbar-compact h1 {
    font-size: clamp(1.7rem, 2.4vw, 3.2rem);
    line-height: 0.96;
}

.smart-home-topbar-compact p {
    margin-top: 6px;
    font-size: 0.86rem;
    max-width: 48ch;
}

.smart-home-topicons span {
    width: 34px;
    height: 34px;
    font-size: 0.82rem;
}

.smart-grid-principal-compact,
.smart-grid-secundario-compact {
    gap: clamp(8px, 1vh, 14px);
}

.smart-panel-hero-compact {
    min-height: clamp(120px, 16vh, 168px);
    grid-template-columns: 160px 1fr;
}

.smart-hero-visual-compact {
    min-height: clamp(120px, 16vh, 168px);
}

.smart-hero-avatar-compact {
    width: 68px;
    height: 68px;
    left: 22px;
    bottom: 14px;
}

.smart-hero-avatar-compact span:first-child {
    top: 12px;
    width: 18px;
    height: 18px;
}

.smart-hero-avatar-compact span:last-child {
    bottom: 12px;
    width: 40px;
    height: 22px;
}

.smart-hero-copy-compact {
    padding: clamp(10px, 2vh, 18px) 18px clamp(8px, 1.6vh, 16px) 14px;
}

.smart-hero-copy-compact p {
    margin-top: 6px;
    font-size: 0.8rem;
    max-width: 26ch;
}

.smart-big-number {
    margin-top: 6px;
    font-size: clamp(1.9rem, 3.2vw, 3.4rem);
}

.smart-big-label {
    margin-top: 2px;
    font-size: 0.88rem;
}

.smart-panel-gauge-compact {
    padding: clamp(8px, 1.6vh, 14px) 12px;
    gap: 6px;
}

.smart-gauge-compact {
    width: clamp(80px, 10vh, 108px);
}

.smart-gauge-compact .smart-gauge-inner {
    width: clamp(58px, 7.4vh, 78px);
    height: clamp(58px, 7.4vh, 78px);
}

.smart-gauge-compact .smart-gauge-inner strong {
    font-size: 1.02rem;
}

.smart-gauge-caption {
    font-size: 0.7rem;
    max-width: 15ch;
    line-height: 1.25;
}

.smart-control-card-compact {
    min-height: clamp(56px, 7.2vh, 76px);
    grid-template-columns: 96px 1fr;
}

.smart-control-main-compact {
    padding: 8px 14px;
    gap: 3px;
}

.smart-control-main-compact strong {
    font-size: 1.35rem;
}

.smart-control-main-compact span {
    font-size: 0.74rem;
}

.smart-slider {
    height: 16px;
    padding: 5px 8px;
}

.smart-slider i {
    height: 6px;
    width: 16px;
}

.smart-listado-panel-compact,
.smart-chart-panel-compact {
    padding: clamp(10px, 1.8vh, 16px);
}

.smart-room-list-compact {
    gap: 6px;
    margin-top: 8px;
}

.smart-room-item-compact {
    grid-template-columns: 52px 1fr auto auto;
    min-height: clamp(32px, 4.4vh, 42px);
    gap: 8px;
    padding-right: 10px;
}

.smart-room-item-compact .smart-room-icon {
    font-size: 0.84rem;
}

.smart-room-item-compact .smart-room-icon::after {
    right: -20px;
    width: 40px;
}

.smart-room-item-compact .smart-room-name {
    font-size: 0.88rem;
}

.smart-room-item-compact .smart-room-value {
    font-size: 1.08rem;
}

.smart-switch {
    width: 44px;
    height: 24px;
}

.smart-switch::after {
    width: 16px;
    height: 16px;
}

.smart-switch.is-on::after {
    transform: translateX(20px);
}

.smart-chart-compact {
    margin-top: 8px;
}

.smart-bars {
    min-height: clamp(72px, 10vh, 108px);
    padding: 10px 4px 6px;
}

.smart-bars span {
    height: 14px;
}

.smart-chart-labels {
    margin-top: 6px;
    font-size: 0.7rem;
}

@media (min-width: 1180px) {
    .contenido-panel {
        padding: 24px 28px;
    }
}

@media (max-width: 980px) {
    .smart-panel-hero-compact,
    .smart-control-card-compact,
    .smart-room-item-compact {
        grid-template-columns: 1fr;
    }

    .smart-hero-copy-compact {
        padding: 18px;
    }
}

/* --- Fix login input autofill / white box --- */
.login-template-field input,
.login-template-field input:-webkit-autofill,
.login-template-field input:-webkit-autofill:hover,
.login-template-field input:-webkit-autofill:focus,
.login-template-field input:-webkit-autofill:active {
    background: transparent !important;
    background-color: transparent !important;
    color: #f3fefa !important;
    -webkit-text-fill-color: #f3fefa !important;
    caret-color: #6bedc0 !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(13, 89, 63, 0.01) inset !important;
    transition: background-color 999999s ease-out 0s !important;
}

.login-password-row,
.login-template-field .login-linea-inputs {
    background: transparent !important;
}

/* --- Global palette override: Mexico palette across the app --- */
:root {
    --fondo: #fff7ea;
    --fondo-panel: rgba(255, 250, 240, 0.86);
    --superficie: rgba(255, 252, 247, 0.94);
    --superficie-solida: #fffdf9;
    --borde: rgba(23, 157, 111, 0.12);
    --borde-fuerte: rgba(23, 157, 111, 0.22);
    --texto: #23314d;
    --texto-suave: #60708d;
    --texto-tenue: #8f9bb2;
    --acento: #006341;
    --acento-oscuro: #004a30;
    --acento-claro: #e3fbf3;
    --rojo: #d71919;
    --naranja: #f98f21;
    --amarillo: #ffc95b;
    --azul-profundo: #006341;
    --teal-vivo: #007a50;
    --sombra-xl: 0 30px 70px -34px rgba(23, 157, 111, 0.24);
    --sombra-md: 0 22px 46px -30px rgba(23, 157, 111, 0.22);
}

body {
    background:
        radial-gradient(circle at top left, rgba(24, 205, 143,0.18), transparent 24%),
        radial-gradient(circle at 85% 12%, rgba(255,201,91,0.22), transparent 20%),
        linear-gradient(180deg, #fffdf8 0%, #fff7ea 58%, #fff0d7 100%);
}

body::before {
    background-image:
        linear-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.4) 1px, transparent 1px);
}

.sidebar {
    background: linear-gradient(180deg, #179d6f 0%, #148860 52%, #0f7552 100%);
}

.sidebar::before {
    background: radial-gradient(circle, rgba(255, 201, 91, 0.28), transparent 68%);
}

.sidebar::after {
    background: radial-gradient(circle, rgba(24, 205, 143, 0.24), transparent 70%);
}

.marca-icono,
.login-bus-icono,
.login-avatar,
.smart-device-icon,
.smart-hero-visual,
.smart-room-icon,
.smart-control-side {
    background: linear-gradient(180deg, #18cd8f 0%, #179d6f 100%) !important;
}

.sidebar nav a.activo {
    background: linear-gradient(135deg, rgba(24, 205, 143,0.78), rgba(23, 157, 111,0.9));
}

.sidebar-toggle-flotante,
.filtros button,
.form-item-nuevo button,
.form-acciones button,
.login-caja button,
.boton-primario,
.boton-foto,
.boton-foto-enviar,
.paginacion .pagina-actual,
.login-submit-minimal {
    background: linear-gradient(135deg, #18cd8f, #179d6f) !important;
    color: #fff !important;
}

.boton-secundario {
    color: #179d6f;
    border-color: rgba(23, 157, 111, 0.16);
    background: rgba(255, 255, 255, 0.82);
}

.boton-peligro,
.alerta-error,
.badge-alerta,
.badge-reproceso,
.badge-no-atender,
.reporte-sin-precio {
    background: rgba(215, 25, 25, 0.1) !important;
    color: #d71919 !important;
    border-color: rgba(215, 25, 25, 0.18) !important;
}

.tabs .tab:hover,
.tab-activo,
.eyebrow,
.resumen-pill,
.smart-home-topicons span {
    background: rgba(24, 205, 143, 0.12);
    color: #179d6f;
}

.tarjeta-numero,
.resumen-cifra,
.smart-big-number,
.smart-control-main strong,
.smart-room-value,
.smart-gauge-inner,
.reporte-total .valor,
.tarjeta-reporte-titulo,
.reporte-grupo-titulo,
.smart-device-title {
    color: #179d6f !important;
}

.smart-gauge-inner strong,
.smart-control-main strong,
.smart-room-value {
    color: #d71919 !important;
}

.smart-gauge,
.smart-bars span,
.smart-slider,
.smart-switch.is-on::after,
.badge-en-proceso,
.badge-proceso {
    background: linear-gradient(180deg, #25bcc0 0%, #234c91 100%) !important;
}

.smart-bars span:nth-child(2n),
.badge-reproceso,
.badge-cancelada,
.badge-anulada {
    background: linear-gradient(180deg, #f98f21 0%, #d71919 100%) !important;
    color: #fff !important;
}

.badge-programada {
    background: rgba(255, 201, 91, 0.24) !important;
    color: #9a5b00 !important;
}

.badge-entregada,
.badge-terminada,
.badge-finalizada {
    background: rgba(24, 205, 143, 0.16) !important;
    color: #14825c !important;
}

.badge-cerrada {
    background: rgba(23, 157, 111, 0.1) !important;
    color: #179d6f !important;
}

.tabla thead th,
.smart-panel-kicker,
.smart-section-title,
.etiqueta,
.galeria-etiqueta,
.tarjeta-kicker {
    color: #6a7d9d !important;
}

.login-minimal {
    background:
        radial-gradient(circle at top, rgba(255,201,91,0.1), transparent 28%),
        linear-gradient(180deg, #179d6f 0%, #13865f 42%, #0f7351 68%, #18cd8f 100%);
}

.login-orbe-a {
    background: radial-gradient(circle, rgba(255,201,91,0.18), transparent 68%);
}

.login-orbe-b {
    background: radial-gradient(circle, rgba(249,143,33,0.2), transparent 68%);
}

.login-orbe-c {
    background: radial-gradient(circle, rgba(24, 205, 143,0.2), transparent 70%);
}

.login-registro-falso {
    background: linear-gradient(180deg, rgba(249,143,33,0.32) 0%, rgba(215,25,25,0.26) 100%);
}

input:focus,
select:focus,
textarea:focus,
.login-password-toggle.is-active {
    color: #18cd8f !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(24, 205, 143,0.46) !important;
    box-shadow: 0 0 0 4px rgba(24, 205, 143,0.12) !important;
}

.tarjeta,
.login-caja,
.ficha-datos,
.observaciones,
.form-grid,
.campo-ancho,
.item-ficha,
.buscador-orden,
.tarjeta-reporte,
.tabla,
.reporte-sin-precio,
.smart-panel,
.smart-mini-device {
    border-color: rgba(23, 157, 111, 0.08) !important;
}

.smart-room-item,
.smart-mini-device,
.smart-listado-panel,
.smart-chart-panel,
.smart-panel-gauge,
.smart-panel-hero {
    background: rgba(255, 253, 249, 0.94) !important;
}

/* filas de tabla clickeables */
tr.fila-clic { cursor: pointer; }
tr.fila-clic:hover td { background: rgba(9, 143, 97, 0.07); }

/* acciones del encabezado de una orden (editar + accesos a informes) */
.acciones-orden {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* --- Mobile layout hardening: menu and page content must never inherit desktop widths --- */
@media (max-width: 900px) {
    html,
    body {
        width: 100%;
        overflow-x: clip;
    }

    .layout,
    html[data-sidebar="cerrado"] .layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100%;
        min-width: 0;
    }

    .contenido {
        grid-column: 1;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding: 12px;
    }

    .contenido-panel {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding: 20px;
        overflow: hidden;
    }

    /* En móvil el sidebar NO ocupa lugar en la rejilla: es un panel deslizante
       sobre el contenido. Estas propiedades deben repetirse aquí porque este
       bloque es posterior al otro @media 900px y de lo contrario lo anula. */
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(310px, calc(100vw - 28px));
        max-width: calc(100vw - 28px);
        min-height: 100dvh;
        padding: 18px 16px 24px;
        gap: 16px;
        border-radius: 0 28px 28px 0;
        transform: translateX(-100%);
        transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 80;
        pointer-events: none;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    html[data-sidebar="abierto"] .sidebar {
        transform: translateX(0);
        box-shadow: var(--sombra-xl);
        pointer-events: auto;
        opacity: 1;
        padding: 18px 16px 24px;
    }

    .marca {
        width: 100%;
        min-width: 0;
        padding: 4px 2px 12px;
    }

    .marca-titulo { font-size: 1.5rem; }
    .marca-subtitulo { font-size: 0.68rem; }

    .sidebar nav {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        width: 100%;
        gap: 6px;
        margin: 0;
    }

    .sidebar nav a {
        display: block;
        width: 100%;
        min-width: 0;
        padding: 12px 14px;
        border-radius: 16px;
        font-size: 0.93rem;
        line-height: 1.25;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .usuario-caja {
        width: 100%;
        margin-top: auto;
        padding: 14px;
    }

    .sidebar-toggle-flotante {
        top: 14px;
        left: 14px;
        width: 44px;
        height: 44px;
    }

    .panel-hero,
    .metricas-grid,
    .tarjetas-reportes,
    .ficha-datos,
    .form-grid,
    .smart-grid-principal,
    .smart-grid-secundario,
    .smart-grid-terciario,
    .smart-stack-columna {
        min-width: 0;
    }

    .tabla-scroll {
        width: 100%;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 640px) {
    h1 {
        font-size: clamp(1.9rem, 10vw, 2.45rem);
        line-height: 1;
        overflow-wrap: anywhere;
    }

    .contenido { padding: 0; }

    .contenido-panel {
        min-height: 100dvh;
        border-radius: 0;
        border-inline: 0;
        padding: 78px 16px 24px;
    }

    .encabezado-accion,
    .hero-acciones,
    .form-acciones,
    .reporte-acciones {
        align-items: stretch;
        gap: 12px;
    }

    .encabezado-accion .boton-primario,
    .hero-acciones a,
    .form-acciones button,
    .reporte-acciones a {
        width: 100%;
        text-align: center;
    }

    .filtros {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        align-items: stretch;
        margin: 18px 0;
    }

    .filtros label,
    .filtros input,
    .filtros select,
    .filtros button,
    .form-grid input,
    .form-grid select,
    .campo-ancho,
    .buscador-orden input {
        min-width: 0;
        width: 100%;
    }

    .filtros button,
    .boton-primario { min-height: 46px; }

    .tabla {
        min-width: 720px;
        font-size: 0.8rem;
    }

    .tabla th,
    .tabla td { padding: 11px 12px; }

    .smart-home-topbar { gap: 10px; }
    .smart-home-topicons { display: none; }
}

/* ---- Marca STETIC ---------------------------------------------------- */
/* El logo reemplaza al icono genérico + textos "Payport / Taller operativo".
   En el sidebar (fondo azul oscuro) se usa la variante blanca; en login y
   documentos impresos, la de color sobre fondo claro. */
.marca-logo {
    display: block;
    flex: 1;
    min-width: 0;
    line-height: 0;
}

.marca-logo img {
    width: 100%;
    max-width: 190px;
    height: auto;
    display: block;
}

.login-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
}

.login-logo img {
    width: min(240px, 70%);
    height: auto;
    display: block;
}

@media (max-width: 900px) {
    .marca-logo img { max-width: 168px; }
}

/* Aviso de sesión ya abierta en /login (evita el salto silencioso al panel) */
.login-sesion-activa {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.08);
    color: #eefff9;
    text-align: center;
}

.login-sesion-activa p { margin: 0 0 10px; font-size: 0.92rem; }

.login-sesion-acciones {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.login-sesion-acciones .boton-primario,
.login-sesion-acciones .boton-secundario {
    padding: 8px 16px;
    font-size: 0.88rem;
}

/* Estabilidad del login al volver desde logout: Chrome restaura el autofill
   después de pintar la página. Estos elementos no deben heredar las
   transiciones globales durante esa restauración. */
.login-template-field,
.login-template-field::before,
.login-template-field::after,
.login-template-field input,
.login-submit-minimal {
    animation: none !important;
    transition: none !important;
}

.login-template-field input:-webkit-autofill,
.login-template-field input:-webkit-autofill:hover,
.login-template-field input:-webkit-autofill:focus,
.login-template-field input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px rgba(13, 89, 63, 0.01) inset !important;
    box-shadow: 0 0 0 1000px rgba(13, 89, 63, 0.01) inset !important;
    transition: none !important;
    animation: none !important;
}

/* La transición se conserva únicamente para el mensaje de carga del botón. */
.login-submit-texto,
.login-submit-cargando {
    transition: opacity 180ms ease, transform 180ms ease !important;
}

/* =====================================================================
   LOGIN v2 (lg-*) — reconstruido completo. Reemplaza al login-* anterior
   (esas reglas quedan inertes: el markup nuevo no usa sus clases).
   Claves anti-parpadeo:
   - cero transiciones/animaciones en los campos;
   - el autorrelleno de Chrome/Edge se pinta del MISMO color del campo
     (box-shadow interior) con el clásico retardo de transición enorme,
     para que no haya flash blanco/amarillo al restaurar credenciales.
   ===================================================================== */
.lg-pantalla {
    position: relative;
    /* flex: el contenedor .contenido-solo centra con flex y encogía esta
       sección al ancho de la tarjeta, dejando ver el fondo claro del body
       a los lados. Debe ocupar SIEMPRE toda la pantalla. */
    flex: 1 1 100%;
    width: 100%;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 14% 10%, rgba(255, 184, 28, 0.20), transparent 44%),
        radial-gradient(circle at 86% 88%, rgba(200, 16, 46, 0.22), transparent 48%),
        linear-gradient(164deg, #032519 0%, #07553a 46%, #09704d 78%, #06422e 100%);
    overflow: hidden;
}

.lg-fondo { position: absolute; inset: 0; pointer-events: none; }

.lg-orbe {
    position: absolute;
    border-radius: 999px;
    filter: blur(48px);
    opacity: 0.55;
}

.lg-orbe-a {
    width: 460px; height: 460px; top: -140px; right: -120px;
    background: radial-gradient(circle, rgba(200, 16, 46, 0.5), transparent 70%);
}

.lg-orbe-b {
    width: 560px; height: 560px; bottom: -220px; left: -180px;
    background: radial-gradient(circle, rgba(255, 184, 28, 0.42), transparent 72%);
}

.lg-tarjeta {
    position: relative;
    width: min(400px, 100%);
    padding: 38px 34px 34px;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(3, 33, 23, 0.58);
    backdrop-filter: blur(20px);
    box-shadow: 0 40px 90px -40px rgba(0, 14, 9, 0.9);
    text-align: center;
}

.lg-logo {
    width: min(220px, 72%);
    height: auto;
    display: block;
    margin: 0 auto;
}

.lg-subtitulo {
    margin: 10px 0 26px;
    font-size: 0.74rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(211, 249, 236, 0.62);
}

.lg-alerta {
    margin-bottom: 18px;
    padding: 11px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 118, 96, 0.45);
    background: rgba(182, 61, 51, 0.28);
    color: #ffe3dd;
    font-size: 0.9rem;
}

.lg-form { display: grid; gap: 16px; text-align: left; }

.lg-etiqueta {
    display: block;
    margin: 0 2px 7px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(211, 249, 236, 0.72);
}

.lg-campo-fila { position: relative; display: block; }

.lg-campo input {
    width: 100%;
    padding: 13px 15px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: #083f2c;
    color: #f3fcf9;
    font-size: 1rem;
    outline: none;
    transition: none;
    animation: none;
}

.lg-campo input::placeholder { color: rgba(211, 249, 236, 0.34); }

.lg-campo input:focus {
    border-color: rgba(255, 184, 28, 0.75);
    box-shadow: 0 0 0 3px rgba(255, 184, 28, 0.18);
}

/* Autorrelleno del navegador: mismo color del campo, sin flash */
.lg-campo input:-webkit-autofill,
.lg-campo input:-webkit-autofill:hover,
.lg-campo input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #083f2c inset;
    -webkit-text-fill-color: #f3fcf9;
    caret-color: #f3fcf9;
    border: 1px solid rgba(255, 255, 255, 0.16);
    transition: background-color 600000s ease-in-out 0s;
}

.lg-ojo {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(211, 249, 236, 0.55);
    cursor: pointer;
}

.lg-ojo:hover, .lg-ojo-activo { color: #ffb81c; }
.lg-ojo svg { width: 20px; height: 20px; }
.lg-campo-fila input { padding-right: 50px; }

.lg-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 18px;
    border: none;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffffff;
    background: linear-gradient(96deg, #098f61 0%, #076f4b 55%, #a3122f 130%);
    cursor: pointer;
    box-shadow: 0 20px 34px -22px rgba(9, 143, 97, 0.95);
}

.lg-boton:hover { filter: brightness(1.07); }

.lg-boton-borde {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow: none;
}

.lg-entrar { margin-top: 6px; position: relative; }
.lg-entrar .lg-entrar-cargando { display: none; }
.lg-entrar.lg-cargando .lg-entrar-texto { display: none; }
.lg-entrar.lg-cargando .lg-entrar-cargando { display: inline; }
.lg-entrar:disabled { opacity: 0.75; cursor: default; }

.lg-sesion {
    padding: 6px 0 2px;
    color: #e6fcf4;
}

.lg-sesion p { margin: 0 0 16px; font-size: 0.95rem; line-height: 1.5; }

.lg-sesion-botones { display: grid; gap: 10px; }

@media (max-width: 480px) {
    .lg-tarjeta { padding: 30px 22px 26px; }
}

/* En móvil el sidebar flota SOBRE el contenido: fondo casi sólido para que
   no se transparente el texto de abajo */
@media (max-width: 900px) {
    .sidebar { background: rgba(3, 30, 21, 0.96); }
}

/* enlace de cambio de contraseña en la caja de usuario del sidebar */
.usuario-cambiar-clave {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.78rem;
    color: rgba(228, 244, 236, 0.75);
    text-decoration: underline;
}
.usuario-cambiar-clave:hover { color: #ffffff; }