/* ================================================================
   tema-taller.css — Identidad visual "Taller" de FerreSys
   ----------------------------------------------------------------
   Vidrio sobre tablero perforado (el pegboard donde cuelgan las
   herramientas). Colores tomados del logo de DICAR: rojo bermellón,
   negro carbón y grises; acero y olivo quedan para datos y estados.

   Para cambiar la marca basta con los tokens de abajo: el resto del
   archivo usa var(--t-acento) y las variantes -rgb en sus rgba().

   Se activa por página con <body class="tema-taller">: todo va
   anidado bajo esa clase para no mover las pantallas que todavía
   no se migran. Se enlaza DESPUÉS de main-styles.css y ui-system.css.
   ================================================================ */

.tema-taller {
    /* --- Materiales --- */
    --t-tinta: #1b1918;            /* negro carbón del logo: textos y vidrio ahumado */
    --t-tinta-rgb: 27, 25, 24;
    --t-tinta-2: #46403d;
    --t-gris: #7a7270;             /* gris del logo: textos de apoyo */
    --t-gris-claro: #b7b0ad;
    --t-arena: #f2f0ee;            /* fondo: blanco humo */
    --t-acento: #d9402a;           /* rojo DICAR: acción principal y marca */
    --t-acento-rgb: 217, 64, 42;
    --t-acento-hondo: #a92b1b;
    --t-acento-claro: #ef5a42;     /* rojo luminoso para íconos y detalles sobre fondo negro */
    --t-ambar: #f0a03c;            /* advertencias (poco stock) */
    --t-acero: #4a6782;            /* segunda serie de datos */
    --t-olivo: #4f7a4a;            /* todo bien */
    --t-ladrillo: #a3172f;         /* agotado / alerta: vino, para no confundirse con el rojo de marca */
    --t-ladrillo-rgb: 163, 23, 47;
    --t-linea: rgba(var(--t-tinta-rgb), 0.08);

    /* --- Vidrio --- */
    --t-vidrio: linear-gradient(165deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 252, 247, 0.58) 100%);
    --t-vidrio-borde: rgba(255, 255, 255, 0.82);
    --t-canto: inset 0 1px 0 rgba(255, 255, 255, 0.95);
    --t-sombra: 0 1px 2px rgba(var(--t-tinta-rgb), 0.04), 0 14px 34px -18px rgba(var(--t-tinta-rgb), 0.28);
    --t-sombra-alta: 0 2px 4px rgba(var(--t-tinta-rgb), 0.05), 0 24px 48px -20px rgba(var(--t-tinta-rgb), 0.38);
    --t-radio: 22px;
    --t-radio-chico: 14px;

    /* --- Letra --- */
    --t-titulos: 'Bricolage Grotesque', 'Figtree', sans-serif;
    --t-texto: 'Figtree', system-ui, sans-serif;
    --t-mono: 'IBM Plex Mono', ui-monospace, monospace;

    /* Se reescriben los tokens viejos para que lo heredado acompañe */
    --color-texto-principal: var(--t-tinta);
    --color-texto-secundario: var(--t-gris);
    --color-acento: var(--t-acento);
    --fuente-principal: var(--t-texto);
    --fuente-titulos: var(--t-titulos);

    font-family: var(--t-texto);
    color: var(--t-tinta);
    background: var(--t-arena);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------------------------------
   FONDO: arena, luz cálida y tablero perforado
   ---------------------------------------------------------------- */
.tema-taller .morph-bg {
    background:
        radial-gradient(90% 70% at 100% 0%, rgba(var(--t-acento-rgb), 0.10) 0%, transparent 60%),
        radial-gradient(70% 60% at 0% 100%, rgba(74, 103, 130, 0.10) 0%, transparent 65%),
        var(--t-arena);
}

/* Perforaciones del pegboard: se desvanecen hacia el centro para que
   el vidrio tenga algo que refractar sin ensuciar la lectura. */
.tema-taller .morph-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at center, rgba(var(--t-tinta-rgb), 0.13) 1.6px, transparent 2.1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(120% 90% at 70% 10%, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 90%);
    mask-image: radial-gradient(120% 90% at 70% 10%, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 90%);
}

.tema-taller .blob { filter: blur(120px); opacity: 0.55; }
.tema-taller .blob-1 { background: rgba(var(--t-acento-rgb), 0.20); }
.tema-taller .blob-2 { background: rgba(var(--t-tinta-rgb), 0.08); }
.tema-taller .blob-3 { background: rgba(74, 103, 130, 0.10); }

.tema-taller .main-content { padding: 2.25rem 2.5rem 3rem; max-width: 1560px; margin: 0 auto; }

/* ----------------------------------------------------------------
   MENÚ LATERAL
   Vidrio esmerilado; el activo es una pieza de grafito con el
   canto rojo, no otro degradado.
   ---------------------------------------------------------------- */
.tema-taller .aside-menu {
    background: linear-gradient(180deg, rgba(255, 253, 249, 0.72) 0%, rgba(250, 245, 238, 0.62) 100%);
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    border-right: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: inset -1px 0 0 rgba(var(--t-tinta-rgb), 0.05), 8px 0 40px -24px rgba(var(--t-tinta-rgb), 0.25);
    font-family: var(--t-texto);
}

.tema-taller .divLogo { border-bottom: 1px solid var(--t-linea); }

.tema-taller .lista-aside { padding-top: 0.75rem; }

.tema-taller .lista-aside li a {
    margin: 2px 12px;
    padding: 0.68rem 0.95rem;
    border-radius: 12px;
    color: var(--t-tinta-2);
    font-weight: 500;
    font-size: 0.93rem;
    letter-spacing: -0.005em;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.tema-taller .lista-aside li a i.fa-solid,
.tema-taller .lista-aside li a i.fa-brands {
    width: 20px;
    margin-right: 12px;
    font-size: 0.98rem;
    color: var(--t-gris);
    text-align: center;
    transition: color 0.18s ease;
}

.tema-taller .lista-aside li a:hover {
    background: rgba(255, 255, 255, 0.7);
    color: var(--t-tinta);
    padding-left: 0.95rem;
}

.tema-taller .lista-aside li a:hover i { color: var(--t-acento); }

.tema-taller .lista-aside li.active > a {
    position: relative;
    background: var(--t-tinta);
    color: #fff;
    box-shadow: 0 10px 22px -12px rgba(var(--t-tinta-rgb), 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.tema-taller .lista-aside li.active > a i { color: var(--t-acento-claro); }

/* Canto rojo: como la marca de pintura en el mango de la herramienta */
.tema-taller .lista-aside li.active > a::after {
    content: '';
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--t-acento);
}

/* Submenú abierto: el padre se queda en tinta suave, no en grafito */
.tema-taller .lista-aside li.has-submenu.active > a {
    background: rgba(255, 255, 255, 0.6);
    color: var(--t-tinta);
    box-shadow: none;
}

.tema-taller .lista-aside li.has-submenu.active > a::after { display: none; }
.tema-taller .lista-aside li.has-submenu.active > a i { color: var(--t-acento); }

.tema-taller .submenu li a { padding-left: 2.85rem; font-size: 0.88rem; }

.tema-taller .menu-separator {
    margin: 10px 24px;
    border-bottom: 1px dashed rgba(var(--t-tinta-rgb), 0.12);
}

.tema-taller .aside-footer { border-top: 1px solid var(--t-linea); padding: 14px 16px 22px; }

.tema-taller .aside-footer .logout-button {
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 0.62rem;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--t-tinta-2);
    background: transparent;
}

.tema-taller .aside-footer .logout-button:hover {
    background: rgba(var(--t-ladrillo-rgb), 0.08);
    color: var(--t-ladrillo);
}

.tema-taller .aside-footer .btn-tutorial-aside {
    background: rgba(255, 255, 255, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    color: var(--t-tinta) !important;
    box-shadow: var(--t-canto), 0 4px 12px -8px rgba(var(--t-tinta-rgb), 0.3);
}

.tema-taller .aside-footer .btn-tutorial-aside i { color: var(--t-acento); }

.tema-taller .aside-footer .btn-tutorial-aside:hover,
.tema-taller .aside-footer .btn-tutorial-aside:hover span,
.tema-taller .aside-footer .btn-tutorial-aside:hover i {
    background: var(--t-tinta) !important;
    color: #fff !important;
    border-color: var(--t-tinta) !important;
}

.tema-taller .desktop-toggle-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(var(--t-tinta-rgb), 0.08);
    color: var(--t-tinta-2);
    box-shadow: 0 4px 10px -4px rgba(var(--t-tinta-rgb), 0.3);
}

/* ----------------------------------------------------------------
   ENCABEZADO DE PÁGINA
   ---------------------------------------------------------------- */
.tema-taller .t-encabezado {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.tema-taller .t-encabezado-izq { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }

.tema-taller .t-fecha {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--t-mono);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--t-gris);
    margin-bottom: 0.45rem;
}

/* Foquito de "abierto": la tienda está viva */
.tema-taller .t-fecha .t-foco {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--t-olivo);
    box-shadow: 0 0 0 3px rgba(79, 122, 74, 0.18);
}

.tema-taller .t-saludo {
    margin: 0;
    font-family: var(--t-titulos);
    font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: var(--t-tinta);
    font-variation-settings: "opsz" 72;
}

.tema-taller .t-saludo em {
    font-style: normal;
    color: var(--t-acento);
}

.tema-taller .t-bajada {
    margin: 0.45rem 0 0;
    color: var(--t-gris);
    font-size: 0.98rem;
}

/* Cinta métrica: el único adorno del encabezado */
.tema-taller .t-cinta {
    height: 12px;
    margin: -0.75rem 0 1.75rem;
    border-radius: 2px;
    background:
        repeating-linear-gradient(90deg, rgba(var(--t-tinta-rgb), 0.28) 0 1px, transparent 1px 60px) bottom / 100% 12px no-repeat,
        repeating-linear-gradient(90deg, rgba(var(--t-tinta-rgb), 0.18) 0 1px, transparent 1px 30px) bottom / 100% 8px no-repeat,
        repeating-linear-gradient(90deg, rgba(var(--t-tinta-rgb), 0.10) 0 1px, transparent 1px 6px) bottom / 100% 4px no-repeat;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 60%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 60%, transparent 100%);
    opacity: 0.8;
}

.tema-taller .t-acciones { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.tema-taller .t-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    height: 44px;
    padding: 0 1.15rem;
    border-radius: 999px;
    font-family: var(--t-texto);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.tema-taller .t-btn:active { transform: translateY(1px); }

.tema-taller .t-btn-vidrio {
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.9);
    color: var(--t-tinta);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: var(--t-canto), 0 6px 16px -10px rgba(var(--t-tinta-rgb), 0.35);
}

.tema-taller .t-btn-vidrio i { color: var(--t-acento); }
.tema-taller .t-btn-vidrio:hover { background: rgba(255, 255, 255, 0.9); }

.tema-taller .t-btn-tinta {
    background: var(--t-tinta);
    border: 1px solid var(--t-tinta);
    color: #fff;
    box-shadow: 0 10px 22px -12px rgba(var(--t-tinta-rgb), 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.tema-taller .t-btn-tinta i { color: var(--t-acento-claro); }
.tema-taller .t-btn-tinta:hover { background: #2c2827; }

.tema-taller .t-btn:focus-visible,
.tema-taller .t-kpi:focus-visible,
.tema-taller .t-enlace:focus-visible {
    outline: 2px solid var(--t-acento);
    outline-offset: 3px;
}

/* Botón de menú en móvil (oculto en escritorio) */
.tema-taller .btn-menu-mobile { display: none; }

.tema-taller .btn-menu-mobile {
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: var(--t-canto), 0 6px 16px -10px rgba(var(--t-tinta-rgb), 0.35);
    color: var(--t-tinta);
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ----------------------------------------------------------------
   KPIs — etiquetas colgantes de precio
   ---------------------------------------------------------------- */
.tema-taller .t-kpis {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.tema-taller .t-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    padding: 1.15rem 1.3rem 1.2rem;
    border-radius: var(--t-radio);
    background: var(--t-vidrio);
    border: 1px solid var(--t-vidrio-borde);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    box-shadow: var(--t-canto), var(--t-sombra);
    color: var(--t-tinta);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(.2, .8, .2, 1), box-shadow 0.25s ease;
}

.tema-taller .t-kpi:hover {
    transform: translateY(-3px);
    box-shadow: var(--t-canto), var(--t-sombra-alta);
}

/* Perforación de la etiqueta: arriba a la derecha, con su ojillo */
.tema-taller .t-kpi::before {
    content: '';
    position: absolute;
    top: 16px;
    right: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--t-arena);
    box-shadow:
        inset 0 1px 2px rgba(var(--t-tinta-rgb), 0.35),
        0 0 0 3px rgba(255, 255, 255, 0.85),
        0 0 0 4px rgba(var(--t-tinta-rgb), 0.07);
}

.tema-taller .t-kpi-etiqueta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding-right: 1.6rem;
    font-family: var(--t-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--t-gris);
}

.tema-taller .t-kpi-etiqueta i { font-size: 0.82rem; color: var(--t-acento); }

.tema-taller .t-kpi-valor {
    margin-top: 0.35rem;
    font-family: var(--t-titulos);
    font-size: clamp(1.45rem, 1.1rem + 0.9vw, 1.95rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Los centavos van chiquitos, como en la etiqueta de anaquel */
.tema-taller .t-centavos {
    font-size: 0.55em;
    font-weight: 600;
    vertical-align: 0.62em;
    margin-left: 1px;
    opacity: 0.6;
    letter-spacing: 0;
}

.tema-taller .t-signo {
    font-size: 0.62em;
    font-weight: 600;
    vertical-align: 0.42em;
    margin-right: 2px;
    opacity: 0.55;
}

.tema-taller .t-kpi-nota {
    margin-top: auto;
    padding-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--t-gris);
    line-height: 1.35;
}

.tema-taller .t-kpi.es-alerta .t-kpi-valor { color: var(--t-ladrillo); }
.tema-taller .t-kpi.es-pendiente .t-kpi-valor { color: var(--t-acento-hondo); }

/* --- Protagonista: vidrio ahumado --- */
.tema-taller .t-kpi-hero {
    grid-row: span 2;
    padding: 1.5rem 1.6rem 1.4rem;
    color: #fbf6ef;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(var(--t-acento-rgb), 0.55) 0%, rgba(var(--t-acento-rgb), 0) 55%),
        radial-gradient(80% 60% at 0% 100%, rgba(var(--t-acento-rgb), 0.12) 0%, rgba(var(--t-acento-rgb), 0) 70%),
        linear-gradient(160deg, rgba(36, 33, 32, 0.92) 0%, rgba(20, 19, 18, 0.86) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 26px 50px -24px rgba(var(--t-tinta-rgb), 0.75);
}

.tema-taller .t-kpi-hero::before {
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(255, 255, 255, 0.12);
}

/* Reflejo especular del canto superior */
.tema-taller .t-kpi-hero::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 48%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.tema-taller .t-kpi-hero .t-kpi-etiqueta { color: rgba(251, 246, 239, 0.6); }
.tema-taller .t-kpi-hero .t-kpi-etiqueta i { color: var(--t-acento-claro); }

.tema-taller .t-kpi-hero .t-kpi-valor {
    margin-top: 0.9rem;
    font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem);
    letter-spacing: -0.045em;
    color: #fff;
    font-variation-settings: "opsz" 96;
}

.tema-taller .t-kpi-hero .t-kpi-nota { color: rgba(251, 246, 239, 0.62); }

.tema-taller .t-hero-pie {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 1.2rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.14);
}

.tema-taller .t-hero-dato { display: flex; flex-direction: column; gap: 2px; }

.tema-taller .t-hero-dato span {
    font-family: var(--t-mono);
    font-size: 0.66rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(251, 246, 239, 0.5);
}

.tema-taller .t-hero-dato strong {
    font-family: var(--t-titulos);
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.tema-taller .t-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 40px;
    padding: 0 1rem;
    border-radius: 999px;
    background: var(--t-acento);
    color: #fff;
    font-weight: 600;
    font-size: 0.86rem;
    text-decoration: none;
    box-shadow: 0 8px 20px -8px rgba(var(--t-acento-rgb), 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.tema-taller .t-hero-cta:hover { background: #f06b1f; transform: translateY(-1px); }

/* --- Resurtir: tarjeta ancha con las piezas más urgentes --- */
.tema-taller .t-kpi-ancha { grid-column: span 2; }

.tema-taller .t-kpi-fila {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.tema-taller .t-piezas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.65rem;
    min-width: 0;
}

.tema-taller .t-pieza {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(var(--t-tinta-rgb), 0.07);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--t-tinta-2);
}

.tema-taller .t-pieza > span:first-child {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 22ch;
}

.tema-taller .t-pieza b {
    font-family: var(--t-mono);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--t-acento);
    filter: brightness(0.75);
}

.tema-taller .t-pieza.agotada b { color: var(--t-ladrillo); filter: none; }

/* ----------------------------------------------------------------
   PANELES
   ---------------------------------------------------------------- */
.tema-taller .dashboard-grid-2 {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: 1.25rem;
    margin-top: 0;
}

.tema-taller .dashboard-column { gap: 1.25rem; }
.tema-taller .dashboard-column > .card { margin: 0; }

.tema-taller .card,
body.tema-taller .card {
    position: relative;
    padding: 1.4rem 1.5rem 1.5rem;
    border-radius: var(--t-radio);
    background: var(--t-vidrio);
    border: 1px solid var(--t-vidrio-borde);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    box-shadow: var(--t-canto), var(--t-sombra);
}

body.tema-taller .card:hover {
    transform: none;
    box-shadow: var(--t-canto), var(--t-sombra);
}

.tema-taller .card h3,
.tema-taller .chart-card h3 {
    margin: 0;
    font-family: var(--t-titulos);
    font-size: 1.12rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--t-tinta);
}

.tema-taller .panel-titulo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.tema-taller .panel-titulo .panel-sub,
.tema-taller .panel-nota {
    display: block;
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--t-gris);
    font-weight: 400;
    letter-spacing: 0;
    font-family: var(--t-texto);
}

.tema-taller .chart-card > .panel-nota { margin: 0.2rem 0 1rem; }

.tema-taller .panel-link,
.tema-taller .t-enlace {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(var(--t-tinta-rgb), 0.07);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--t-tinta-2);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.tema-taller .panel-link i { font-size: 0.72rem; transition: transform 0.18s ease; }
.tema-taller .panel-link:hover { background: var(--t-tinta); color: #fff; text-decoration: none; }
.tema-taller .panel-link:hover i { transform: translateX(2px); }

.tema-taller .panel-vacio {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    padding: 1.1rem 1rem;
    border-radius: var(--t-radio-chico);
    background: rgba(255, 255, 255, 0.45);
    border: 1px dashed rgba(var(--t-tinta-rgb), 0.12);
    color: var(--t-tinta-2);
    font-size: 0.9rem;
}

.tema-taller .panel-vacio i { color: var(--t-olivo); font-size: 1.1rem; }

/* --- Tablas de panel --- */
.tema-taller .lista-scroll { max-height: 320px; overflow-y: auto; margin: 0 -0.5rem; padding: 0 0.5rem; }

.tema-taller .lista-scroll::-webkit-scrollbar { width: 8px; }
.tema-taller .lista-scroll::-webkit-scrollbar-thumb {
    background: rgba(var(--t-tinta-rgb), 0.14);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.tema-taller .tabla-panel { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9rem; }

.tema-taller .tabla-panel th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.55rem 0.6rem;
    text-align: left;
    font-family: var(--t-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--t-gris);
    background: rgba(250, 246, 240, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--t-linea);
}

.tema-taller .tabla-panel td {
    padding: 0.72rem 0.6rem;
    border-bottom: 1px solid var(--t-linea);
    color: var(--t-tinta);
    vertical-align: middle;
}

.tema-taller .tabla-panel tbody tr { transition: background-color 0.15s ease; }
.tema-taller .tabla-panel tbody tr:hover td { background: rgba(255, 255, 255, 0.55); }
.tema-taller .tabla-panel tbody tr:hover td:first-child { border-radius: 10px 0 0 10px; }
.tema-taller .tabla-panel tbody tr:hover td:last-child { border-radius: 0 10px 10px 0; }
.tema-taller .tabla-panel tr:last-child td { border-bottom: none; }

.tema-taller .tabla-panel .sku {
    display: block;
    margin-top: 3px;
    font-family: var(--t-mono);
    font-size: 0.7rem;
    color: var(--t-gris);
    letter-spacing: 0.02em;
}

.tema-taller .t-num { font-variant-numeric: tabular-nums; }

.tema-taller .t-folio {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    background: rgba(var(--t-tinta-rgb), 0.05);
    font-family: var(--t-mono);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--t-tinta-2);
}

/* --- Chips --- */
.tema-taller .chip-stock,
.tema-taller .chip-canal {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.tema-taller .chip-stock { font-family: var(--t-mono); min-width: 2.6rem; justify-content: center; }
.tema-taller .chip-stock.bajo { background: rgba(240, 160, 60, 0.18); border-color: rgba(240, 160, 60, 0.35); color: #8a4f06; }
.tema-taller .chip-stock.agotado { background: rgba(var(--t-ladrillo-rgb), 0.12); border-color: rgba(var(--t-ladrillo-rgb), 0.3); color: var(--t-ladrillo); }

.tema-taller .chip-canal::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.tema-taller .chip-canal.web { background: rgba(var(--t-acento-rgb), 0.1); border-color: rgba(var(--t-acento-rgb), 0.22); color: var(--t-acento-hondo); }
.tema-taller .chip-canal.pos { background: rgba(74, 103, 130, 0.1); border-color: rgba(74, 103, 130, 0.22); color: var(--t-acero); }

.tema-taller .t-por-cobrar {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--t-acento-hondo);
}

/* --- Canales: dos tramos de una misma barra --- */
.tema-taller .t-canal-barra {
    display: flex;
    height: 14px;
    gap: 3px;
    margin: 0.4rem 0 1.1rem;
}

.tema-taller .t-canal-barra span {
    display: block;
    height: 100%;
    border-radius: 4px;
    min-width: 4px;
    transition: flex-grow 0.6s cubic-bezier(.2, .8, .2, 1);
}

.tema-taller .t-canal-barra span:first-child { border-radius: 999px 4px 4px 999px; }
.tema-taller .t-canal-barra span:last-child { border-radius: 4px 999px 999px 4px; }

.tema-taller .t-canal-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }

.tema-taller .t-canal-item {
    padding: 0.85rem 0.95rem;
    border-radius: var(--t-radio-chico);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.85);
}

.tema-taller .t-canal-item .t-kpi-etiqueta { padding-right: 0; font-size: 0.64rem; }

.tema-taller .t-canal-item strong {
    display: block;
    margin: 0.35rem 0 0.15rem;
    font-family: var(--t-titulos);
    font-size: 1.2rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.tema-taller .t-canal-item small { font-size: 0.78rem; color: var(--t-gris); }

.tema-taller .t-punto {
    width: 8px;
    height: 8px;
    border-radius: 3px;
    flex-shrink: 0;
}

.tema-taller .t-minimo {
    text-align: center;
    font-family: var(--t-mono);
    font-size: 0.8rem;
    color: var(--t-gris);
}

.tema-taller .t-monto {
    text-align: right;
    white-space: nowrap;
    font-family: var(--t-titulos);
    font-weight: 650;
    letter-spacing: -0.01em;
}

/* --- Gráficas --- */
.tema-taller .t-grafica { position: relative; width: 100%; }

/* dashboard.css fija `height:auto !important` (y 240px a comisiones):
   aquí la altura la manda el contenedor, Chart.js solo lo llena. */
.tema-taller .t-grafica canvas,
.tema-taller .t-grafica #comisionesVendedorChart {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
}
.tema-taller .t-grafica-ingresos { height: 270px; }
.tema-taller .t-grafica-dona { height: 210px; }

/* Leyenda de la dona: un ranking legible, no puntitos sueltos */
.tema-taller .t-leyenda {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    counter-reset: rango;
}

.tema-taller .t-leyenda li {
    counter-increment: rango;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.1rem;
    border-top: 1px solid var(--t-linea);
    font-size: 0.86rem;
}

.tema-taller .t-leyenda li::before {
    content: counter(rango);
    width: 1.1rem;
    font-family: var(--t-mono);
    font-size: 0.7rem;
    color: var(--t-gris-claro);
}

.tema-taller .t-leyenda-nombre {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--t-tinta);
}

.tema-taller .t-leyenda b {
    font-family: var(--t-mono);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--t-tinta-2);
}

/* ----------------------------------------------------------------
   SELECTOR DE FECHAS (Litepicker) en vidrio
   ---------------------------------------------------------------- */
.tema-taller .litepicker {
    font-family: var(--t-texto);
    --litepicker-container-months-color-bg: transparent;
    --litepicker-month-header-color: var(--t-tinta);
    --litepicker-button-prev-month-color: var(--t-tinta-2);
    --litepicker-button-next-month-color: var(--t-tinta-2);
    --litepicker-button-prev-month-color-hover: var(--t-acento);
    --litepicker-button-next-month-color-hover: var(--t-acento);
    --litepicker-month-weekday-color: var(--t-gris);
    --litepicker-day-color: var(--t-tinta);
    --litepicker-day-color-hover: var(--t-acento);
    --litepicker-is-today-color: var(--t-acento);
    --litepicker-is-in-range-color: rgba(var(--t-acento-rgb), 0.14);
    --litepicker-is-start-color: #fff;
    --litepicker-is-start-color-bg: var(--t-tinta);
    --litepicker-is-end-color: #fff;
    --litepicker-is-end-color-bg: var(--t-tinta);
}

.tema-taller .litepicker .container__main {
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 251, 245, 0.78) 100%);
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: var(--t-canto), 0 30px 60px -24px rgba(var(--t-tinta-rgb), 0.45);
}

.tema-taller .litepicker .container__months { box-shadow: none; background: transparent; }
.tema-taller .litepicker .month-item-name { font-family: var(--t-titulos); font-weight: 650; text-transform: capitalize; }
.tema-taller .litepicker .container__days .day-item { border-radius: 10px; }

/* ----------------------------------------------------------------
   TOUR (Shepherd)
   ---------------------------------------------------------------- */
.tema-taller .shepherd-element.shepherd-theme-custom {
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 251, 245, 0.86) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 30px 60px -24px rgba(var(--t-tinta-rgb), 0.5);
}

.tema-taller .shepherd-theme-custom .shepherd-header { background: transparent; border-bottom: 1px solid var(--t-linea); }
.tema-taller .shepherd-theme-custom .shepherd-title { font-family: var(--t-titulos); color: var(--t-tinta); letter-spacing: -0.02em; }
.tema-taller .shepherd-theme-custom .shepherd-text { font-family: var(--t-texto); color: var(--t-tinta-2); }
.tema-taller .shepherd-theme-custom .shepherd-button { background: var(--t-tinta); border-radius: 999px; padding: 9px 18px; }
.tema-taller .shepherd-theme-custom .shepherd-button:hover { background: var(--t-acento); }
.tema-taller .shepherd-theme-custom .shepherd-button-secondary { background: rgba(var(--t-tinta-rgb), 0.06); color: var(--t-tinta-2); }
.tema-taller .shepherd-theme-custom .shepherd-button-secondary:hover { background: rgba(var(--t-tinta-rgb), 0.12); color: var(--t-tinta); }

/* ----------------------------------------------------------------
   ENTRADA ESCALONADA
   ---------------------------------------------------------------- */
@keyframes t-sube {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.tema-taller .t-entra { animation: t-sube 0.55s cubic-bezier(.2, .8, .2, 1) both; }

@media (prefers-reduced-motion: reduce) {
    .tema-taller .t-entra { animation: none; }
    .tema-taller .t-kpi,
    .tema-taller .t-canal-barra span { transition: none; }
    .tema-taller .blob { animation: none; }
}

/* ----------------------------------------------------------------
   RESPONSIVO
   ---------------------------------------------------------------- */
@media (max-width: 1280px) {
    .tema-taller .t-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tema-taller .t-kpi-hero { grid-row: auto; grid-column: 1 / -1; }
    .tema-taller .t-kpi-ancha { grid-column: span 2; }
}

@media (max-width: 992px) {
    .tema-taller .main-content { padding: 1.25rem 1rem 2.5rem; }
    .tema-taller .dashboard-grid-2 { grid-template-columns: minmax(0, 1fr); }
    .tema-taller .page-wrapper,
    .tema-taller #pageWrapper { padding: 0; }
    .tema-taller .btn-menu-mobile { display: inline-flex; align-items: center; justify-content: center; }
    .tema-taller .t-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tema-taller .t-kpi-ancha { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .tema-taller .t-encabezado { align-items: stretch; }
    .tema-taller .t-acciones { width: 100%; }
    .tema-taller .t-acciones .t-btn { flex: 1; justify-content: center; }
    .tema-taller .t-kpis { gap: 0.7rem; }
    .tema-taller .t-kpi { padding: 1rem 1.05rem; border-radius: 18px; }
    .tema-taller .t-kpi-hero { padding: 1.3rem 1.25rem; }
    .tema-taller .t-canal-lista { grid-template-columns: 1fr; }
    .tema-taller .card,
    body.tema-taller .card { padding: 1.15rem 1.1rem; border-radius: 18px; }
    .tema-taller .tabla-panel { font-size: 0.85rem; }
    .tema-taller .t-oculta-movil { display: none; }
}

@media (max-width: 400px) {
    .tema-taller .t-kpis { grid-template-columns: minmax(0, 1fr); }
}

/* En pantallas angostas nada puede empujar el ancho de la página */
@media (max-width: 992px) {
    .tema-taller .main-content { width: 100%; max-width: 100vw; overflow-x: clip; }
    .tema-taller .t-kpi,
    .tema-taller .card { min-width: 0; }
    .tema-taller .t-kpi-nota { overflow-wrap: anywhere; }
}


/* ================================================================
   CAPA DE SISTEMA
   ----------------------------------------------------------------
   Lo de arriba nació en el dashboard. Esto viste los componentes
   que comparten las ~45 pantallas: botones, formularios, tablas,
   DataTables, modales, badges, pestañas, SweetAlert, Select2.
   Todo bajo `body.tema-taller` para ganarle a main-styles.css,
   ui-system.css y a los <style> propios de cada pantalla.
   ================================================================ */

/* --- Tokens viejos remapeados: lo que use var(--...) se alinea solo --- */
body.tema-taller {
    --brand-cyan: var(--t-acento);
    --brand-green: var(--t-ambar);
    --brand-dark: var(--t-tinta);
    --brand-gradient: linear-gradient(180deg, #e2523b 0%, var(--t-acento) 100%);
    --color-acento-hover: var(--t-acento-hondo);
    --color-borde: rgba(var(--t-tinta-rgb), 0.11);
    --color-exito: var(--t-olivo);
    --color-peligro: var(--t-ladrillo);
    --color-aviso: var(--t-ambar);
    --glass-bg: rgba(255, 252, 247, 0.66);
    --glass-border: rgba(255, 255, 255, 0.82);
    --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(var(--t-tinta-rgb), 0.04), 0 14px 34px -18px rgba(var(--t-tinta-rgb), 0.28);
    --radius: 22px;
    --color-aside-hover-bg: rgba(var(--t-acento-rgb), 0.08);
    --color-aside-active-texto: var(--t-acento);
    background: var(--t-arena);
}

body.tema-taller ::selection { background: rgba(var(--t-acento-rgb), 0.22); }

/* --- Títulos --- */
body.tema-taller h1,
body.tema-taller h2,
body.tema-taller h3,
body.tema-taller h4 {
    font-family: var(--t-titulos);
    letter-spacing: -0.02em;
}

body.tema-taller .main-content > h1,
body.tema-taller .table-header h1,
body.tema-taller .header-main h1,
body.tema-taller .content-header h1,
body.tema-taller .content-title,
body.tema-taller .page-title {
    font-family: var(--t-titulos);
    font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: var(--t-tinta);
    font-variation-settings: "opsz" 72;
}

body.tema-taller .table-header,
body.tema-taller .header-main,
body.tema-taller .content-header { margin-bottom: 1.5rem; }

/* La cinta métrica bajo el título de cada pantalla */
body.tema-taller .table-header,
body.tema-taller .content-header {
    position: relative;
    padding-bottom: 1.1rem;
}

body.tema-taller .table-header::after,
body.tema-taller .content-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 9px;
    background:
        repeating-linear-gradient(90deg, rgba(var(--t-tinta-rgb), 0.24) 0 1px, transparent 1px 60px) bottom / 100% 9px no-repeat,
        repeating-linear-gradient(90deg, rgba(var(--t-tinta-rgb), 0.14) 0 1px, transparent 1px 12px) bottom / 100% 4px no-repeat;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 100%);
    pointer-events: none;
}

body.tema-taller .form-section-title {
    font-family: var(--t-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--t-gris);
    border-bottom: 1px dashed rgba(var(--t-tinta-rgb), 0.14);
    padding-bottom: 0.55rem;
}

body.tema-taller .text-muted { color: var(--t-gris) !important; }

/* --- Superficies --- */
body.tema-taller .card,
body.tema-taller .config-card,
body.tema-taller .summary-card,
body.tema-taller .report-selection-card,
body.tema-taller .report-menu-card,
body.tema-taller .conteo-card,
body.tema-taller .module-card,
body.tema-taller .soap-card,
body.tema-taller .info-card,
body.tema-taller .kpi-card {
    background: var(--t-vidrio);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    border-top-color: var(--t-vidrio-borde);
    border-right-color: var(--t-vidrio-borde);
    border-bottom-color: var(--t-vidrio-borde);
    border-radius: var(--t-radio);
    box-shadow: var(--t-canto), var(--t-sombra);
}

body.tema-taller .card:hover { transform: none; box-shadow: var(--t-canto), var(--t-sombra); }

body.tema-taller .glass-panel {
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px;
}

/* --- Tarjetas de indicador: misma familia que las etiquetas del dashboard --- */
body.tema-taller .stat-card {
    position: relative;
    padding: 1.05rem 1.2rem;
    gap: 0.9rem;
    border-radius: var(--t-radio);
    background: var(--t-vidrio);
    border: 1px solid var(--t-vidrio-borde);
    box-shadow: var(--t-canto), var(--t-sombra);
    color: var(--t-tinta);
    transition: transform 0.25s cubic-bezier(.2, .8, .2, 1), box-shadow 0.25s ease;
}

body.tema-taller .stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--t-canto), var(--t-sombra-alta);
}

/* El círculo de color con ícono se vuelve una ficha sobria;
   los colores venían en style="" de cada pantalla. */
body.tema-taller .stat-card-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
    background: rgba(var(--t-tinta-rgb), 0.05) !important;
    border: 1px solid rgba(var(--t-tinta-rgb), 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.tema-taller .stat-card-icon i {
    color: var(--t-acento) !important;
    font-size: 1.05rem !important;
}

body.tema-taller .stat-card-title {
    font-family: var(--t-mono);
    font-size: 0.68rem !important;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--t-gris) !important;
}

body.tema-taller .stat-card-value {
    font-family: var(--t-titulos);
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

body.tema-taller .stat-card-description,
body.tema-taller .stat-card small { color: var(--t-gris) !important; font-size: 0.8rem; }

/* --- Botones --- */
body.tema-taller .btn {
    min-height: 42px;
    padding: 0.6rem 1.15rem;
    border-radius: 12px;
    font-family: var(--t-texto);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

body.tema-taller .btn:active { transform: translateY(1px); }

body.tema-taller .btn:focus-visible {
    outline: 2px solid var(--t-acento);
    outline-offset: 2px;
}

body.tema-taller .btn-primary {
    background: var(--t-acento);
    color: #fff;
    border: 1px solid var(--t-acento-hondo);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 18px -10px rgba(var(--t-acento-rgb), 0.85);
}

body.tema-taller .btn-primary:hover {
    background: #c4341f;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 22px -10px rgba(var(--t-acento-rgb), 0.9);
}

body.tema-taller .btn-secondary,
body.tema-taller .btn-light,
body.tema-taller .btn-outline {
    background: rgba(255, 255, 255, 0.7);
    color: var(--t-tinta);
    border: 1px solid rgba(var(--t-tinta-rgb), 0.1);
    box-shadow: var(--t-canto), 0 4px 12px -8px rgba(var(--t-tinta-rgb), 0.3);
}

body.tema-taller .btn-secondary:hover,
body.tema-taller .btn-light:hover,
body.tema-taller .btn-outline:hover {
    background: rgba(255, 255, 255, 0.95);
    color: var(--t-tinta);
    border-color: rgba(var(--t-tinta-rgb), 0.16);
}

body.tema-taller .btn-dark,
body.tema-taller .btn-tinta {
    background: var(--t-tinta);
    color: #fff;
    border: 1px solid var(--t-tinta);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 22px -12px rgba(var(--t-tinta-rgb), 0.75);
}

body.tema-taller .btn-success {
    background: var(--t-olivo);
    color: #fff;
    border: 1px solid #3f6640;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 18px -10px rgba(79, 122, 74, 0.8);
}

body.tema-taller .btn-success:hover { background: #456c41; color: #fff; }

body.tema-taller .btn-danger {
    background: rgba(var(--t-ladrillo-rgb), 0.1);
    color: var(--t-ladrillo);
    border: 1px solid rgba(var(--t-ladrillo-rgb), 0.28);
    box-shadow: none;
}

body.tema-taller .btn-danger:hover { background: var(--t-ladrillo); color: #fff; }

body.tema-taller .btn-warning {
    background: rgba(240, 160, 60, 0.18);
    color: #8a4f06;
    border: 1px solid rgba(240, 160, 60, 0.4);
}

body.tema-taller .btn-info {
    background: rgba(74, 103, 130, 0.12);
    color: var(--t-acero);
    border: 1px solid rgba(74, 103, 130, 0.28);
}

body.tema-taller .btn:disabled,
body.tema-taller .btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Botón de menú móvil: en todas las pantallas, la misma ficha de vidrio */
body.tema-taller .btn-menu-mobile {
    width: 44px;
    height: 44px;
    margin: 0 0 1rem;
    padding: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: var(--t-canto), 0 6px 16px -10px rgba(var(--t-tinta-rgb), 0.35);
    color: var(--t-tinta);
    font-size: 1.1rem;
}

body.tema-taller .header-main .btn-menu-mobile,
body.tema-taller .t-encabezado .btn-menu-mobile,
body.tema-taller .header-left-container .btn-menu-mobile { margin: 0 0.75rem 0 0; }

@media (min-width: 993px) {
    body.tema-taller .btn-menu-mobile { display: none !important; }
}

@media (max-width: 992px) {
    body.tema-taller .btn-menu-mobile { display: inline-flex; align-items: center; justify-content: center; }
}

/* Íconos de acción en las tablas */
body.tema-taller .action-buttons a,
body.tema-taller .action-buttons button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 2px;
    border-radius: 10px;
    font-size: 0.92rem;
    color: var(--t-tinta-2);
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.tema-taller .action-buttons a:hover,
body.tema-taller .action-buttons button:hover { transform: none; background: rgba(var(--t-tinta-rgb), 0.07); color: var(--t-tinta); }
body.tema-taller .action-buttons a.edit:hover { color: var(--t-acento); }
body.tema-taller .action-buttons a.delete:hover { color: var(--t-ladrillo); background: rgba(var(--t-ladrillo-rgb), 0.08); }

/* --- Formularios --- */
body.tema-taller .form-label {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--t-tinta-2);
    letter-spacing: -0.005em;
}

body.tema-taller .form-control.form-control,
body.tema-taller input.swal2-input,
body.tema-taller .dataTables_wrapper .dataTables_filter input,
body.tema-taller .dataTables_wrapper .dataTables_length select,
body.tema-taller #customSearchInput {
    font-family: var(--t-texto);
    color: var(--t-tinta);
    background-color: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(var(--t-tinta-rgb), 0.12);
    border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(var(--t-tinta-rgb), 0.04);
}

body.tema-taller .form-control.form-control:hover { border-color: rgba(var(--t-tinta-rgb), 0.2); }

body.tema-taller .form-control.form-control:focus,
body.tema-taller input.swal2-input:focus,
body.tema-taller .dataTables_wrapper .dataTables_filter input:focus,
body.tema-taller #customSearchInput:focus {
    outline: none;
    background-color: #fff;
    border-color: var(--t-acento);
    box-shadow: 0 0 0 4px rgba(var(--t-acento-rgb), 0.14);
}

body.tema-taller .form-control.form-control:disabled,
body.tema-taller .form-control.form-control[readonly] {
    background-color: rgba(var(--t-tinta-rgb), 0.04);
    border-color: rgba(var(--t-tinta-rgb), 0.1);
    color: var(--t-tinta-2);
}

body.tema-taller .form-control::placeholder { color: var(--t-gris-claro); }

body.tema-taller .form-hint { color: var(--t-gris); }

/* Recuadro de la foto (clientes, expediente, venta): varias hojas viejas le dan
   width: 100% + padding + borde; sin border-box se salía del modal por la derecha. */
body.tema-taller .image-upload-wrapper {
    box-sizing: border-box;
    max-width: 100%;
    border-color: rgba(var(--t-tinta-rgb), 0.16);
    background-color: rgba(var(--t-tinta-rgb), 0.025);
}

body.tema-taller .input-group-text {
    background: rgba(var(--t-tinta-rgb), 0.05);
    border-color: rgba(var(--t-tinta-rgb), 0.12);
    color: var(--t-tinta-2);
}

body.tema-taller input[type="checkbox"],
body.tema-taller input[type="radio"] { accent-color: var(--t-acento); }

body.tema-taller .segmented-option:has(input:checked),
body.tema-taller .check-pill:has(input:checked) {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(var(--t-acento-rgb), 0.5);
    color: var(--t-tinta);
    box-shadow: 0 0 0 3px rgba(var(--t-acento-rgb), 0.1), 0 6px 14px -8px rgba(var(--t-tinta-rgb), 0.3);
}

body.tema-taller .segmented-option:has(input:checked) i { color: var(--t-acento); }

body.tema-taller input:checked + .slider { background-color: var(--t-acento); }
body.tema-taller .slider { background-color: rgba(var(--t-tinta-rgb), 0.18); }

body.tema-taller .upload-btn {
    border-color: rgba(var(--t-tinta-rgb), 0.2);
    color: var(--t-tinta);
    background: rgba(255, 255, 255, 0.6);
}

body.tema-taller .upload-btn i { color: var(--t-acento); }

/* --- Buscadores con resultados --- */
body.tema-taller .search-results {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 251, 245, 0.92) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 14px;
    box-shadow: 0 24px 48px -20px rgba(var(--t-tinta-rgb), 0.4);
    padding: 4px;
}

body.tema-taller .search-results > div,
body.tema-taller .search-results .result-item {
    border-radius: 10px;
    border-bottom: 1px solid var(--t-linea);
}

body.tema-taller .search-results > div:hover,
body.tema-taller .search-results .result-item:hover { background: rgba(var(--t-acento-rgb), 0.08); }

body.tema-taller .selected-item {
    background: var(--t-tinta);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 22px -12px rgba(var(--t-tinta-rgb), 0.7);
}

/* --- Tablas --- */
body.tema-taller table.dataTable,
body.tema-taller .cart-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
    color: var(--t-tinta);
}

body.tema-taller table.dataTable thead th,
body.tema-taller .cart-table thead th {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--t-gris);
    font-family: var(--t-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.75rem 0.9rem;
    border-top: none;
    border-bottom: 1px solid rgba(var(--t-tinta-rgb), 0.12);
}

body.tema-taller table.dataTable tbody td,
body.tema-taller .cart-table tbody td {
    padding: 0.85rem 0.9rem;
    border-top: none;
    border-bottom: 1px solid var(--t-linea);
    vertical-align: middle;
}

body.tema-taller table.dataTable tbody tr,
body.tema-taller table.dataTable.stripe tbody tr.odd,
body.tema-taller table.dataTable.display tbody tr.odd,
body.tema-taller table.dataTable.display tbody tr.even { background: transparent; }

body.tema-taller table.dataTable.display tbody tr > .sorting_1,
body.tema-taller table.dataTable.display tbody tr.odd > .sorting_1,
body.tema-taller table.dataTable.display tbody tr.even > .sorting_1,
body.tema-taller table.dataTable.order-column tbody tr > .sorting_1 { background: transparent; box-shadow: none; }

body.tema-taller table.dataTable.display > tbody > tr > *,
body.tema-taller table.dataTable.stripe > tbody > tr.odd > *,
body.tema-taller table.dataTable.display > tbody > tr.odd > * { box-shadow: none; }

body.tema-taller table.dataTable tbody tr:hover > *,
body.tema-taller .cart-table tbody tr:hover > * { background: rgba(255, 255, 255, 0.6); }

body.tema-taller table.dataTable.no-footer { border-bottom: none; }

/* Controles de DataTables */
body.tema-taller .dataTables_wrapper {
    font-family: var(--t-texto);
    color: var(--t-tinta-2);
    font-size: 0.86rem;
}

body.tema-taller .dataTables_wrapper .dataTables_length,
body.tema-taller .dataTables_wrapper .dataTables_info {
    color: var(--t-gris);
    font-size: 0.82rem;
}

body.tema-taller .dataTables_wrapper .dataTables_length select { padding: 0.35rem 1.8rem 0.35rem 0.7rem; margin: 0 0.35rem; }
body.tema-taller .dataTables_wrapper .dataTables_filter input { padding: 0.5rem 0.8rem; margin-left: 0.5rem; }

body.tema-taller .dataTables_wrapper .dataTables_paginate { padding-top: 0.9rem; }

body.tema-taller .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 36px;
    height: 36px;
    margin: 0 2px;
    padding: 0 0.7rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--t-tinta-2) !important;
    font-weight: 600;
    font-size: 0.84rem;
    box-shadow: none !important;
}

body.tema-taller .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(var(--t-tinta-rgb), 0.08) !important;
    color: var(--t-tinta) !important;
}

body.tema-taller .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.tema-taller .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--t-tinta) !important;
    border-color: var(--t-tinta) !important;
    color: #fff !important;
}

body.tema-taller .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.tema-taller .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    opacity: 0.35;
    background: transparent !important;
    border-color: transparent !important;
}

body.tema-taller .dataTables_wrapper .dataTables_processing {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 14px;
    box-shadow: 0 20px 40px -20px rgba(var(--t-tinta-rgb), 0.4);
    color: var(--t-tinta);
}

/* Resumen del punto de venta */
body.tema-taller .summary-table td { border-bottom: 1px dashed rgba(var(--t-tinta-rgb), 0.1); }

body.tema-taller .summary-total-row td,
body.tema-taller .summary-total {
    font-family: var(--t-titulos);
    letter-spacing: -0.02em;
    color: var(--t-tinta);
}

body.tema-taller .folio-display {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--t-mono);
    background: rgba(var(--t-tinta-rgb), 0.06);
    color: var(--t-tinta-2);
    border-radius: 8px;
}

body.tema-taller .cart-item-remove { color: var(--t-gris); }
body.tema-taller .cart-item-remove:hover { color: var(--t-ladrillo); }

/* --- Modales --- */
body.tema-taller .modal-content,
body.tema-taller .shortcut-modal-content {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 251, 245, 0.72) 100%);
    border-radius: 24px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 40px 80px -30px rgba(var(--t-tinta-rgb), 0.5);
}

body.tema-taller .modal-header { border-bottom: 1px solid var(--t-linea); box-shadow: none; }

body.tema-taller .modal-header h2,
body.tema-taller .modal-header h3,
body.tema-taller .modal-title {
    font-family: var(--t-titulos);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--t-tinta);
}

body.tema-taller .modal-footer {
    background: rgba(255, 255, 255, 0.4);
    border-top: 1px solid var(--t-linea);
    box-shadow: none;
}

body.tema-taller .modal-backdrop,
body.tema-taller .modal-overlay,
body.tema-taller .shortcut-modal-overlay {
    background: radial-gradient(120% 90% at 50% 0%, rgba(var(--t-tinta-rgb), 0.25) 0%, rgba(var(--t-tinta-rgb), 0.5) 100%);
}

body.tema-taller .modal-body::-webkit-scrollbar-thumb { background: rgba(var(--t-tinta-rgb), 0.16); background-clip: content-box; }
body.tema-taller .modal-body { scrollbar-color: rgba(var(--t-tinta-rgb), 0.2) transparent; }

body.tema-taller .verificador-header { background: var(--t-tinta); }

/* --- Avisos --- */
body.tema-taller .alert {
    border-radius: 14px;
    border: 1px solid transparent;
    font-weight: 500;
    font-size: 0.9rem;
}

body.tema-taller .alert-success { background: rgba(79, 122, 74, 0.1); border-color: rgba(79, 122, 74, 0.25); color: #335331; }
body.tema-taller .alert-danger { background: rgba(var(--t-ladrillo-rgb), 0.08); border-color: rgba(var(--t-ladrillo-rgb), 0.25); color: #84142a; }
body.tema-taller .alert-warning { background: rgba(240, 160, 60, 0.14); border-color: rgba(240, 160, 60, 0.35); color: #7a4606; }
body.tema-taller .alert-info { background: rgba(74, 103, 130, 0.1); border-color: rgba(74, 103, 130, 0.25); color: #344b60; }

/* --- Badges y chips: una sola familia de pastillas --- */
body.tema-taller .status-badge,
body.tema-taller .stock-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.62rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}

body.tema-taller .status-badge.status-completed,
body.tema-taller .stock-indicator.high { background: rgba(79, 122, 74, 0.12); border-color: rgba(79, 122, 74, 0.25); color: #3d6439; }
body.tema-taller .status-badge.status-cancelled,
body.tema-taller .stock-indicator.low { background: rgba(var(--t-ladrillo-rgb), 0.1); border-color: rgba(var(--t-ladrillo-rgb), 0.25); color: var(--t-ladrillo); }
body.tema-taller .status-badge.status-pending,
body.tema-taller .stock-indicator.medium { background: rgba(240, 160, 60, 0.16); border-color: rgba(240, 160, 60, 0.35); color: #8a4f06; }
body.tema-taller .status-badge.status-delivery { background: rgba(var(--t-acento-rgb), 0.1); border-color: rgba(var(--t-acento-rgb), 0.25); color: var(--t-acento-hondo); }
body.tema-taller .status-badge.status-route { background: rgba(74, 103, 130, 0.12); border-color: rgba(74, 103, 130, 0.25); color: var(--t-acero); }

body.tema-taller .avatar {
    background: var(--t-tinta);
    color: #fff;
    font-family: var(--t-titulos);
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.tema-taller .client-name { color: var(--t-tinta); }
body.tema-taller .client-email { color: var(--t-gris); }

/* --- Pestañas: selector segmentado de vidrio --- */
body.tema-taller .tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 14px;
    background: rgba(var(--t-tinta-rgb), 0.05);
    box-shadow: inset 0 1px 2px rgba(var(--t-tinta-rgb), 0.06);
}

body.tema-taller .tabs .tab,
body.tema-taller .tabs .tab-link {
    padding: 0.55rem 1rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--t-tinta-2);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

body.tema-taller .tabs .tab:hover,
body.tema-taller .tabs .tab-link:hover { color: var(--t-tinta); background: rgba(255, 255, 255, 0.5); }

body.tema-taller .tabs .tab.active,
body.tema-taller .tabs .tab-link.active {
    background: #fff;
    color: var(--t-tinta);
    border: none;
    box-shadow: 0 1px 2px rgba(var(--t-tinta-rgb), 0.08), 0 6px 14px -8px rgba(var(--t-tinta-rgb), 0.35);
}

/* Menús internos (reportes, configuración) */
body.tema-taller .report-nav-item,
body.tema-taller .report-list-item,
body.tema-taller .config-menu-item { border-radius: 12px; color: var(--t-tinta-2); }

body.tema-taller .report-nav-item:hover,
body.tema-taller .report-list-item:hover,
body.tema-taller .config-menu-item:hover { background: rgba(255, 255, 255, 0.6); color: var(--t-tinta); }

body.tema-taller .report-nav-item.active,
body.tema-taller .report-list-item.active,
body.tema-taller .config-menu-item.active {
    background: var(--t-tinta);
    color: #fff;
    box-shadow: 0 10px 22px -12px rgba(var(--t-tinta-rgb), 0.7);
}

body.tema-taller .report-nav-item.active i,
body.tema-taller .report-list-item.active i,
body.tema-taller .config-menu-item.active i { color: var(--t-acento-claro); }

body.tema-taller .badge-filter.active,
body.tema-taller .badge-filter:hover { background: var(--t-tinta); color: #fff; border-color: var(--t-tinta); }

/* --- SweetAlert2 --- */
body.tema-taller .swal2-container.swal2-backdrop-show { background: rgba(var(--t-tinta-rgb), 0.42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

body.tema-taller .swal2-popup {
    border-radius: 24px;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 251, 245, 0.9) 100%);
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 1px 0 #fff, 0 40px 80px -30px rgba(var(--t-tinta-rgb), 0.55);
    font-family: var(--t-texto);
    color: var(--t-tinta-2);
}

body.tema-taller .swal2-title { font-family: var(--t-titulos); color: var(--t-tinta); letter-spacing: -0.025em; }
body.tema-taller .swal2-html-container { color: var(--t-tinta-2); }

body.tema-taller .swal2-styled { border-radius: 12px !important; font-weight: 600 !important; padding: 0.65rem 1.25rem !important; }
body.tema-taller .swal2-styled.swal2-confirm { background: var(--t-acento) !important; box-shadow: 0 8px 18px -10px rgba(var(--t-acento-rgb), 0.85) !important; }
body.tema-taller .swal2-styled.swal2-cancel { background: rgba(var(--t-tinta-rgb), 0.07) !important; color: var(--t-tinta) !important; }
body.tema-taller .swal2-styled.swal2-deny { background: var(--t-ladrillo) !important; }
body.tema-taller .swal2-styled:focus { box-shadow: 0 0 0 3px rgba(var(--t-acento-rgb), 0.25) !important; }

body.tema-taller .swal2-popup.swal2-toast {
    border-radius: 16px;
    background: rgba(var(--t-tinta-rgb), 0.94);
    color: #fff;
    box-shadow: 0 20px 40px -20px rgba(var(--t-tinta-rgb), 0.6);
}

body.tema-taller .swal2-toast .swal2-title { color: #fff; font-family: var(--t-texto); font-weight: 600; }

/* --- Select2 --- */
body.tema-taller .select2-container--default .select2-selection--single,
body.tema-taller .select2-container--default .select2-selection--multiple {
    min-height: 44px;
    border: 1px solid rgba(var(--t-tinta-rgb), 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
}

body.tema-taller .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px; color: var(--t-tinta); padding-left: 0.85rem; }
body.tema-taller .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; right: 8px; }
body.tema-taller .select2-container--default.select2-container--focus .select2-selection,
body.tema-taller .select2-container--default.select2-container--open .select2-selection { border-color: var(--t-acento); box-shadow: 0 0 0 4px rgba(var(--t-acento-rgb), 0.14); }

body.tema-taller .select2-dropdown {
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 252, 247, 0.97);
    box-shadow: 0 24px 48px -20px rgba(var(--t-tinta-rgb), 0.4);
}

body.tema-taller .select2-container--default .select2-results__option--highlighted[aria-selected],
body.tema-taller .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: rgba(var(--t-acento-rgb), 0.12); color: var(--t-tinta); }
body.tema-taller .select2-search--dropdown .select2-search__field { border-radius: 10px; border-color: rgba(var(--t-tinta-rgb), 0.12); }

/* --- FullCalendar --- */
body.tema-taller .fc .fc-button-primary { background: var(--t-tinta); border-color: var(--t-tinta); border-radius: 10px; }
body.tema-taller .fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--t-acento); border-color: var(--t-acento); }
body.tema-taller .fc .fc-daygrid-day.fc-day-today { background: rgba(var(--t-acento-rgb), 0.08); }

/* --- Barras de desplazamiento discretas --- */
body.tema-taller ::-webkit-scrollbar { width: 10px; height: 10px; }
body.tema-taller ::-webkit-scrollbar-track { background: transparent; }
body.tema-taller ::-webkit-scrollbar-thumb {
    background: rgba(var(--t-tinta-rgb), 0.16);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}
body.tema-taller ::-webkit-scrollbar-thumb:hover { background: rgba(var(--t-tinta-rgb), 0.3); background-clip: content-box; }

/* --- Responsivo de las pantallas genéricas --- */
@media (max-width: 992px) {
    body.tema-taller .main-content { padding: 1.25rem 1rem 2.5rem; }
}


/* ================================================================
   ACCESO (login, cambio de contraseña)
   Panel de marca en vidrio ahumado + tarjeta de vidrio claro.
   ================================================================ */
body.t-acceso { min-height: 100vh; min-height: 100dvh; }

body.t-acceso .login-container {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem 1.25rem;
    box-sizing: border-box;
}

body.t-acceso .t-acceso-marca {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    width: 440px;
    min-height: 560px;
    padding: 2.25rem 2.25rem 2rem;
    box-sizing: border-box;
    border-radius: 28px;
    color: #fbf6ef;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(var(--t-acento-rgb), 0.55) 0%, rgba(var(--t-acento-rgb), 0) 55%),
        radial-gradient(90% 60% at 0% 100%, rgba(var(--t-acento-rgb), 0.16) 0%, rgba(var(--t-acento-rgb), 0) 70%),
        linear-gradient(160deg, rgba(36, 33, 32, 0.93) 0%, rgba(20, 19, 18, 0.88) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 40px 80px -36px rgba(var(--t-tinta-rgb), 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

@media (min-width: 960px) {
    body.t-acceso .t-acceso-marca { display: flex; }
}

body.t-acceso .t-acceso-logo { display: flex; align-items: center; gap: 0.6rem; }
body.t-acceso .t-acceso-logo img { width: 36px; height: 36px; object-fit: contain; }

body.t-acceso .t-acceso-logo span {
    font-family: var(--t-titulos);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

body.t-acceso .t-acceso-logo em { font-style: normal; color: var(--t-acento-claro); }

body.t-acceso .t-acceso-marca .t-fecha { color: rgba(251, 246, 239, 0.55); }

body.t-acceso .t-acceso-marca h2 {
    margin: 0;
    font-family: var(--t-titulos);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: #fff;
    font-variation-settings: "opsz" 96;
}

body.t-acceso .t-acceso-bajada {
    margin: 0.9rem 0 0;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(251, 246, 239, 0.7);
}

body.t-acceso .t-acceso-lista {
    list-style: none;
    margin: 0;
    padding: 1.1rem 0 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.16);
    display: grid;
    gap: 0.7rem;
}

body.t-acceso .t-acceso-lista li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.92rem;
    color: rgba(251, 246, 239, 0.85);
}

body.t-acceso .t-acceso-lista i {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--t-acento-claro);
    font-size: 0.82rem;
}

/* --- Tarjeta --- */
body.t-acceso .login-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 2.4rem 2.2rem 1.8rem;
    box-sizing: border-box;
    border-radius: 28px;
    text-align: left;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 251, 245, 0.64) 100%);
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: inset 0 1px 0 #fff, 0 40px 80px -36px rgba(var(--t-tinta-rgb), 0.5);
}

/* Perforación de etiqueta, igual que en el dashboard */
body.t-acceso .login-card::before {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--t-arena);
    box-shadow: inset 0 1px 2px rgba(var(--t-tinta-rgb), 0.35), 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 4px rgba(var(--t-tinta-rgb), 0.07);
}

body.t-acceso .login-card .logo { display: block; height: 46px; width: auto; margin: 0 0 1.6rem; }

@media (min-width: 960px) {
    /* Con el panel de marca al lado, el logo sobra */
    body.t-acceso .login-container:has(.t-acceso-marca) .login-card .logo { display: none; }
    body.t-acceso .login-container:has(.t-acceso-marca) .login-card { min-height: 560px; display: flex; flex-direction: column; justify-content: center; }
}

body.t-acceso .login-card h1 {
    margin: 0;
    font-family: var(--t-titulos);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--t-tinta);
}

body.t-acceso .login-card > p {
    margin: 0.35rem 0 1.6rem;
    color: var(--t-gris);
    font-size: 0.98rem;
}

body.t-acceso .login-form .form-group { margin-bottom: 1.1rem; display: block; }

body.t-acceso .login-form label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--t-tinta-2);
}

body.t-acceso .input-wrapper { position: relative; }

body.t-acceso .input-wrapper input {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 0 1rem 0 2.75rem;
    font-family: var(--t-texto);
    font-size: 1rem;
    color: var(--t-tinta);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(var(--t-tinta-rgb), 0.12);
    border-radius: 14px;
    box-shadow: inset 0 1px 2px rgba(var(--t-tinta-rgb), 0.04);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

body.t-acceso .input-wrapper input::placeholder { color: var(--t-gris-claro); }

body.t-acceso .input-wrapper input:focus {
    outline: none;
    background: #fff;
    border-color: var(--t-acento);
    box-shadow: 0 0 0 4px rgba(var(--t-acento-rgb), 0.14);
}

body.t-acceso .input-wrapper .icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--t-gris);
    font-size: 0.95rem;
    pointer-events: none;
    transition: color 0.18s ease;
}

body.t-acceso .input-wrapper input:focus + .icon,
body.t-acceso .input-wrapper input:focus ~ .icon { color: var(--t-acento); }

body.t-acceso .form-group.has-error input { border-color: rgba(var(--t-ladrillo-rgb), 0.5); }

body.t-acceso .btn-login {
    width: 100%;
    height: 52px;
    margin-top: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    border: 1px solid var(--t-tinta);
    border-radius: 14px;
    background: var(--t-tinta);
    color: #fff;
    font-family: var(--t-texto);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 28px -14px rgba(var(--t-tinta-rgb), 0.8);
    transition: background-color 0.18s ease, transform 0.18s ease;
}

body.t-acceso .btn-login i { color: var(--t-acento-claro); transition: transform 0.18s ease; }
body.t-acceso .btn-login:hover { background: #2c2827; }
body.t-acceso .btn-login:hover i { transform: translateX(3px); }
body.t-acceso .btn-login:active { transform: translateY(1px); }
body.t-acceso .btn-login:focus-visible { outline: 2px solid var(--t-acento); outline-offset: 3px; }

body.t-acceso .error-message,
body.t-acceso .success-message {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
    padding: 0.8rem 0.95rem;
    border-radius: 14px;
    font-size: 0.88rem;
    font-weight: 500;
}

body.t-acceso .error-message { background: rgba(var(--t-ladrillo-rgb), 0.08); border: 1px solid rgba(var(--t-ladrillo-rgb), 0.25); color: #84142a; }
body.t-acceso .success-message { background: rgba(79, 122, 74, 0.1); border: 1px solid rgba(79, 122, 74, 0.25); color: #335331; }

body.t-acceso .login-footer {
    margin-top: 1.6rem;
    padding-top: 1.1rem;
    border-top: 1px dashed rgba(var(--t-tinta-rgb), 0.12);
    font-size: 0.82rem;
    color: var(--t-gris);
}

body.t-acceso .login-footer p { margin: 0; line-height: 1.6; }
body.t-acceso .login-footer a { color: var(--t-tinta); font-weight: 600; text-decoration: none; }
body.t-acceso .login-footer a:hover { color: var(--t-acento); }

@media (max-width: 480px) {
    body.t-acceso .login-card { padding: 2rem 1.4rem 1.5rem; border-radius: 24px; }
    body.t-acceso .login-card h1 { font-size: 1.75rem; }
}

/* ================================================================
   PORTAL DE RUTA (ruta.php) — trae su propio vidrio; aquí solo se
   alinean la tarjeta protagonista y los colores fijos.
   ================================================================ */
body.tema-taller .rt { --rt-glass: var(--t-vidrio); }

body.tema-taller .rt-stat.hero {
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(var(--t-acento-rgb), 0.55) 0%, rgba(var(--t-acento-rgb), 0) 55%),
        linear-gradient(160deg, rgba(36, 33, 32, 0.93) 0%, rgba(20, 19, 18, 0.88) 100%);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 22px 44px -22px rgba(var(--t-tinta-rgb), 0.7);
}

body.tema-taller .rt-stat.hero span { color: rgba(251, 246, 239, 0.6); }
body.tema-taller .rt-stat span { font-family: var(--t-mono); font-size: 0.66rem; letter-spacing: 0.08em; }
body.tema-taller .rt-stat b { letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
body.tema-taller .rt-done .ok { background: var(--t-olivo); box-shadow: 0 12px 24px -12px rgba(79, 122, 74, 0.8); }
body.tema-taller .rt .chip.none,
body.tema-taller .rt .chip.off { color: var(--t-gris); background: rgba(var(--t-tinta-rgb), 0.05); }
body.tema-taller .rt .chip.wh { color: var(--t-acero); background: rgba(74, 103, 130, 0.12); }
body.tema-taller .rt .chip.warn { color: #8a4f06; background: rgba(240, 160, 60, 0.18); }

/* ================================================================
   TABLAS HEREDADAS
   Unas 13 pantallas pintan su tabla con selectores de ID
   (#tabla-productos thead tr { background: degradado; color: white }
   y filas que crecen con scale al pasar el cursor). Un ID le gana a
   cualquier clase, así que aquí, y solo aquí, se usa !important.
   ================================================================ */
body.tema-taller table.dataTable thead tr {
    background: transparent !important;
    color: var(--t-gris) !important;
}

body.tema-taller table.dataTable thead th {
    background: transparent !important;
    color: var(--t-gris) !important;
    font-family: var(--t-mono) !important;
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    padding: 0.75rem 0.9rem !important;
    border: none !important;
    border-bottom: 1px solid rgba(var(--t-tinta-rgb), 0.12) !important;
}

body.tema-taller table.dataTable tbody tr {
    background-color: transparent !important;
}

body.tema-taller table.dataTable tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.6) !important;
    transform: none !important;
    box-shadow: none !important;
}

body.tema-taller table.dataTable tbody td {
    color: var(--t-tinta) !important;
    font-size: 0.9rem !important;
    border-bottom: 1px solid var(--t-linea) !important;
}

/* Botones de acción de esas tablas: fichas neutras, el color lo da el hover */
body.tema-taller .action-buttons a,
body.tema-taller .action-buttons button {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(var(--t-tinta-rgb), 0.08);
    color: var(--t-tinta-2);
    text-decoration: none;
}

body.tema-taller .action-buttons a:hover,
body.tema-taller .action-buttons button:hover {
    background: #fff;
    border-color: rgba(var(--t-tinta-rgb), 0.16);
    color: var(--t-acento);
}

body.tema-taller .action-buttons a.delete:hover,
body.tema-taller .action-buttons a.eliminar:hover,
body.tema-taller .action-buttons a.borrar:hover,
body.tema-taller .action-buttons button.eliminar:hover {
    background: rgba(var(--t-ladrillo-rgb), 0.08);
    border-color: rgba(var(--t-ladrillo-rgb), 0.3);
    color: var(--t-ladrillo);
}


/* ================================================================
   PANTALLAS PUNTUALES
   Piezas con fondo blanco sólido o colores fijos en el <style> o
   la hoja propia de cada pantalla.
   ================================================================ */

/* El fondo animado también en pantallas que no cargan main-styles.css
   (corte_caja.php carga solo su hoja). */
.tema-taller .morph-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.tema-taller .blob {
    position: absolute;
    border-radius: 50%;
    animation: floatBlob 20s infinite alternate;
}

/* --- Superficies sueltas que eran blancas --- */
body.tema-taller .config-sidebar,
body.tema-taller .config-content,
body.tema-taller .card-empresas,
body.tema-taller .expediente-header,
body.tema-taller .history-table,
body.tema-taller .timeline-item,
body.tema-taller .reporte-totales,
body.tema-taller .tabla-metodos-pago,
body.tema-taller .resumen-item,
body.tema-taller .campo-row {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-color: rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    box-shadow: var(--t-canto), 0 8px 22px -16px rgba(var(--t-tinta-rgb), 0.3);
}

body.tema-taller .config-sidebar,
body.tema-taller .config-content,
body.tema-taller .card-empresas { border-radius: var(--t-radio); }

body.tema-taller .suggestions-list {
    background: rgba(255, 252, 247, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 14px;
    box-shadow: 0 24px 48px -20px rgba(var(--t-tinta-rgb), 0.4);
    overflow: hidden;
}

body.tema-taller .btn-config,
body.tema-taller .btn-back,
body.tema-taller .date-filter-btn {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(var(--t-tinta-rgb), 0.1);
    border-radius: 12px;
    color: var(--t-tinta);
    box-shadow: var(--t-canto), 0 4px 12px -8px rgba(var(--t-tinta-rgb), 0.3);
}

body.tema-taller .btn-config:hover,
body.tema-taller .btn-back:hover,
body.tema-taller .date-filter-btn:hover { background: #fff; }

/* --- Punto de venta: barra flotante con el total --- */
body.tema-taller .floating-total-bar {
    background: rgba(var(--t-tinta-rgb), 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 20px 40px -16px rgba(var(--t-tinta-rgb), 0.7);
}

body.tema-taller .floating-total-bar .floating-label { color: rgba(251, 246, 239, 0.6); font-family: var(--t-mono); letter-spacing: 0.08em; }
body.tema-taller .floating-total-bar .floating-amount { color: #fff; font-family: var(--t-titulos); letter-spacing: -0.02em; }

body.tema-taller .summary-header h2 { font-family: var(--t-titulos); letter-spacing: -0.025em; }

/* --- Corte de caja --- */
body.tema-taller .corte-caja-container {
    background: transparent;
    font-family: var(--t-texto);
}

body.tema-taller .input-monto-final {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(var(--t-tinta-rgb), 0.14);
    border-radius: 14px;
    font-family: var(--t-titulos);
    color: var(--t-tinta);
}

body.tema-taller .input-monto-final:focus {
    outline: none;
    border-color: var(--t-acento);
    box-shadow: 0 0 0 4px rgba(var(--t-acento-rgb), 0.14);
}

/* --- Órdenes de servicio (kanban) --- */
body.tema-taller .kanban-column {
    background: rgba(255, 252, 247, 0.5);
    border-radius: var(--t-radio);
    box-shadow: var(--t-canto), var(--t-sombra);
}

body.tema-taller .kanban-column-header {
    background: transparent;
    border-bottom: 1px dashed rgba(var(--t-tinta-rgb), 0.12);
    border-radius: var(--t-radio) var(--t-radio) 0 0;
}

body.tema-taller .kanban-column-header h3 { font-family: var(--t-titulos); font-weight: 650; color: var(--t-tinta); }

body.tema-taller .kanban-column-header .count {
    background: var(--t-tinta);
    color: #fff;
    font-family: var(--t-mono);
    font-weight: 600;
}

body.tema-taller .kanban-card {
    background: rgba(255, 255, 255, 0.82);
    border-radius: 14px;
    box-shadow: var(--t-canto), 0 8px 20px -12px rgba(var(--t-tinta-rgb), 0.35);
}

body.tema-taller .kanban-card:hover { box-shadow: var(--t-canto), 0 14px 28px -14px rgba(var(--t-tinta-rgb), 0.45); }

body.tema-taller .ticket-id { font-family: var(--t-mono); color: var(--t-gris); font-weight: 600; }
body.tema-taller .kanban-column[data-status="pendiente"] .kanban-card { border-left-color: var(--t-ambar); }
body.tema-taller .kanban-column[data-status="en_proceso"] .kanban-card { border-left-color: var(--t-acero); }
body.tema-taller .kanban-column[data-status="terminado"] .kanban-card { border-left-color: var(--t-olivo); }
body.tema-taller .kanban-column[data-status="entregado"] .kanban-card { border-left-color: var(--t-gris-claro); }

body.tema-taller .kanban-titulo { font-family: var(--t-titulos); letter-spacing: -0.035em; color: var(--t-tinta); }

body.tema-taller .estatus-switch button.activo {
    background: var(--t-tinta);
    color: #fff;
    box-shadow: 0 8px 18px -10px rgba(var(--t-tinta-rgb), 0.7);
}

/* --- Ventas en ruta (administración) --- */
body.tema-taller .rutas .av {
    background: var(--t-tinta);
    color: var(--t-acento-claro);
    box-shadow: 0 8px 18px -8px rgba(var(--t-tinta-rgb), 0.6);
}

/* --- Menús laterales de configuración y reportes --- */
body.tema-taller .config-sidebar a.active,
body.tema-taller .config-sidebar li.active > a {
    background: var(--t-tinta);
    color: #fff;
}


/* ================================================================
   CORTE DE CAJA (corte_caja.php + css/corte_caja.css)
   No carga main-styles.css: aquí se le da caja, vidrio y tablas.
   ================================================================ */
body.tema-taller .main-content { box-sizing: border-box; }

body.tema-taller .titulo-principal {
    font-family: var(--t-titulos);
    font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    color: var(--t-tinta);
}

body.tema-taller .corte-caja-card {
    background: var(--t-vidrio);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    border: 1px solid var(--t-vidrio-borde);
    border-radius: var(--t-radio);
    box-shadow: var(--t-canto), var(--t-sombra);
    padding: 1.5rem;
}

body.tema-taller .corte-caja-card h2 {
    font-family: var(--t-titulos);
    font-size: 1.15rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--t-tinta);
    border-bottom: 1px dashed rgba(var(--t-tinta-rgb), 0.12);
}

body.tema-taller .caja-estado {
    background: rgba(255, 255, 255, 0.5);
    border: 1px dashed rgba(var(--t-tinta-rgb), 0.16);
    border-radius: 16px;
}

body.tema-taller .caja-estado h3 {
    font-family: var(--t-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--t-gris);
}

body.tema-taller .caja-abierta,
body.tema-taller .caja-cerrada {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
}

body.tema-taller .caja-abierta { background: rgba(79, 122, 74, 0.12); color: #3d6439; }
body.tema-taller .caja-cerrada { background: rgba(var(--t-ladrillo-rgb), 0.1); color: var(--t-ladrillo); }

body.tema-taller .seccion-titulo {
    border-left: none;
    padding-left: 0;
    font-family: var(--t-titulos);
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--t-tinta);
}

/* Las tres tablas de la pantalla, en una sola familia */
body.tema-taller .tabla-caja,
body.tema-taller .tabla-desglose,
body.tema-taller .tabla-metodos-pago {
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: none;
    font-size: 0.88rem;
}

body.tema-taller .tabla-caja th,
body.tema-taller .tabla-desglose th,
body.tema-taller .tabla-metodos-pago th {
    background: rgba(var(--t-tinta-rgb), 0.035);
    color: var(--t-gris);
    font-family: var(--t-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(var(--t-tinta-rgb), 0.1);
}

body.tema-taller .tabla-caja td,
body.tema-taller .tabla-desglose td,
body.tema-taller .tabla-metodos-pago td {
    border-bottom: 1px solid var(--t-linea);
    color: var(--t-tinta);
    font-variant-numeric: tabular-nums;
}

body.tema-taller .tabla-caja tbody tr:hover,
body.tema-taller .tabla-desglose tbody tr:hover { background: rgba(255, 255, 255, 0.55); }

body.tema-taller .row-dinero td:last-child { color: var(--t-olivo); }
body.tema-taller .row-credito { color: #8a4f06; background: rgba(240, 160, 60, 0.1); }
body.tema-taller .row-cancelado,
body.tema-taller .row-cancelado-resumen { color: var(--t-ladrillo); }
body.tema-taller .row-cancelado { background: rgba(var(--t-ladrillo-rgb), 0.06); }

/* Fila de ingreso neto: venía en azul */
body.tema-taller .tabla-desglose tfoot tr {
    background: var(--t-tinta) !important;
}

body.tema-taller .tabla-desglose tfoot tr td {
    color: #fff !important;
    border-color: transparent !important;
    font-family: var(--t-titulos);
}

body.tema-taller .btn-imprimir {
    background: rgba(255, 255, 255, 0.72);
    color: var(--t-tinta);
    border: 1px solid rgba(var(--t-tinta-rgb), 0.1);
    border-radius: 12px;
    box-shadow: var(--t-canto), 0 4px 12px -8px rgba(var(--t-tinta-rgb), 0.3);
}

body.tema-taller .btn-imprimir i { color: var(--t-acento); }
body.tema-taller .btn-imprimir:hover { background: #fff; transform: translateY(-1px); }

body.tema-taller .btn-caja {
    border-radius: 14px;
    font-family: var(--t-texto);
    font-weight: 600;
}

body.tema-taller .contenedor-monto-final {
    background: rgba(255, 255, 255, 0.5);
    border: 1px dashed rgba(var(--t-acento-rgb), 0.35);
    border-radius: 18px;
}

body.tema-taller .contenedor-monto-final label {
    color: var(--t-tinta-2);
    font-weight: 600;
}

body.tema-taller .input-icon-moneda { color: var(--t-acento); font-family: var(--t-titulos); }

body.tema-taller .input-monto-final { font-weight: 700; letter-spacing: -0.02em; }

/* Campos con ícono dentro (nuevo_cliente.php) */
body.tema-taller .input-icon-wrapper { position: relative; }

body.tema-taller .input-icon-wrapper > .form-icon {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--t-gris);
    font-size: 0.9rem;
    pointer-events: none;
    z-index: 1;
}

body.tema-taller .input-icon-wrapper > .form-control.form-control { padding-left: 2.6rem; }
body.tema-taller .input-icon-wrapper:focus-within > .form-icon { color: var(--t-acento); }

/* ================================================================
   PANEL SAAS (admin_negocios.php) — diseño propio con tokens propios
   ================================================================ */
body.tema-taller .admin-container { --text-light: var(--t-gris); }

body.tema-taller .header-admin {
    background: var(--t-vidrio);
    border-color: var(--t-vidrio-borde);
    border-radius: var(--t-radio);
    box-shadow: var(--t-canto), var(--t-sombra);
}

body.tema-taller .header-icon {
    background: var(--t-tinta);
    color: var(--t-acento-claro);
    box-shadow: 0 10px 22px -12px rgba(var(--t-tinta-rgb), 0.7);
}

body.tema-taller .header-title h1 { font-family: var(--t-titulos); letter-spacing: -0.035em; color: var(--t-tinta); }

body.tema-taller .btn-nuevo,
body.tema-taller .btn-guardar {
    background: var(--t-acento);
    font-family: var(--t-texto);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 18px -10px rgba(var(--t-acento-rgb), 0.85);
}

body.tema-taller .btn-cancelar { background: rgba(var(--t-tinta-rgb), 0.06); color: var(--t-tinta); border-color: transparent; }

body.tema-taller .stat-card-icon.ic-total,
body.tema-taller .stat-card-icon.ic-ok,
body.tema-taller .stat-card-icon.ic-warn,
body.tema-taller .stat-card-icon.ic-danger { background: rgba(var(--t-tinta-rgb), 0.05) !important; }

body.tema-taller .ic-ok i { color: var(--t-olivo) !important; }
body.tema-taller .ic-warn i { color: var(--t-ambar) !important; }
body.tema-taller .ic-danger i { color: var(--t-ladrillo) !important; }

body.tema-taller .admin-container table thead tr { background: transparent; }

body.tema-taller .admin-container table thead th {
    background: transparent;
    color: var(--t-gris);
    font-family: var(--t-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    border-bottom: 1px solid rgba(var(--t-tinta-rgb), 0.12);
}

body.tema-taller .admin-container table td { border-bottom: 1px solid var(--t-linea); color: var(--t-tinta); }
body.tema-taller .admin-container tbody tr:hover { background: rgba(255, 255, 255, 0.55); }

body.tema-taller .id-chip { font-family: var(--t-mono); background: rgba(var(--t-tinta-rgb), 0.06); color: var(--t-tinta-2); }

body.tema-taller .optica-avatar { background: var(--t-tinta); color: var(--t-acento-claro); }

body.tema-taller .badge-active { background: rgba(79, 122, 74, 0.12); color: #3d6439; }
body.tema-taller .badge-expired { background: rgba(var(--t-ladrillo-rgb), 0.1); color: var(--t-ladrillo); }
body.tema-taller .badge-suspended { background: rgba(240, 160, 60, 0.16); color: #8a4f06; }

body.tema-taller .modal-glass {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 251, 245, 0.84) 100%);
    border-radius: 24px;
    box-shadow: inset 0 1px 0 #fff, 0 40px 80px -30px rgba(var(--t-tinta-rgb), 0.55);
}

body.tema-taller .modal-head .modal-icon { background: var(--t-tinta); color: var(--t-acento-claro); }


/* ================================================================
   LENTE DE VIDRIO LÍQUIDO (js/tema-taller.js)
   Una sola pieza de vidrio detrás de la opción activa. Las opciones
   pierden su fondo propio: el vidrio es el que se desliza.
   ================================================================ */
body.tema-taller .t-lente-on { isolation: isolate; }

body.tema-taller .t-lente-on > :not(.t-lente) { position: relative; z-index: 1; }

body.tema-taller .t-lente {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: 11px;
    opacity: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.78) 100%);
    backdrop-filter: blur(3px) saturate(190%) brightness(1.06);
    -webkit-backdrop-filter: blur(3px) saturate(190%) brightness(1.06);
    box-shadow:
        inset 0 1px 0 #fff,
        inset 0 -1px 1px rgba(var(--t-tinta-rgb), 0.06),
        inset 1px 0 0 rgba(var(--t-acento-rgb), 0.18),
        inset -1px 0 0 rgba(74, 103, 130, 0.18),
        0 1px 2px rgba(var(--t-tinta-rgb), 0.08),
        0 8px 18px -10px rgba(var(--t-tinta-rgb), 0.45);
    transition: opacity 0.2s ease, scale 0.32s cubic-bezier(.2, 1.4, .3, 1), background 0.25s ease, box-shadow 0.25s ease;
    will-change: transform, width, height;
}

/* Brillo especular: la luz que se queda arriba del vidrio */
body.tema-taller .t-lente::before {
    content: '';
    position: absolute;
    inset: 1px 1px 45% 1px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0.7;
}

/* En tránsito y al presionarla se vuelve lente clara que refracta */
body.tema-taller .t-lente.t-lente-viaja,
body.tema-taller .t-lente.t-lente-presionada {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.32) 100%);
    backdrop-filter: blur(1.5px) saturate(220%) brightness(1.1) contrast(1.05);
    -webkit-backdrop-filter: blur(1.5px) saturate(220%) brightness(1.1) contrast(1.05);
    box-shadow:
        inset 0 1px 0 #fff,
        inset 0 0 0 1px rgba(255, 255, 255, 0.75),
        inset 2px 0 3px rgba(var(--t-acento-rgb), 0.2),
        inset -2px 0 3px rgba(74, 103, 130, 0.22),
        0 14px 28px -12px rgba(var(--t-tinta-rgb), 0.45);
}

body.tema-taller .t-lente.t-lente-presionada { scale: 1.07; }

@media (prefers-reduced-motion: reduce) {
    body.tema-taller .t-lente { transition: opacity 0.2s ease; }
    body.tema-taller .t-lente.t-lente-presionada { scale: 1; }
}

/* --- Pestañas (.tabs): la opción activa ya no pinta su fondo --- */
body.tema-taller .tabs.t-lente-on .tab,
body.tema-taller .tabs.t-lente-on .tab-link,
body.tema-taller .tabs.t-lente-on > button,
body.tema-taller .tabs.t-lente-on .tab.active,
body.tema-taller .tabs.t-lente-on .tab-link.active,
body.tema-taller .tabs.t-lente-on > button.on {
    background: transparent;
    box-shadow: none;
    transition: color 0.25s ease;
}

body.tema-taller .tabs.t-lente-on .tab:hover,
body.tema-taller .tabs.t-lente-on .tab-link:hover,
body.tema-taller .tabs.t-lente-on > button:hover { background: transparent; color: var(--t-tinta); }

body.tema-taller .tabs.t-lente-on .tab.active,
body.tema-taller .tabs.t-lente-on .tab-link.active,
body.tema-taller .tabs.t-lente-on > button.on { color: var(--t-tinta); }

body.tema-taller .tabs.t-lente-on > button.on i { color: var(--t-acento); }

/* Ventas en ruta usa .tabs con botones y otro radio de esquina */
body.tema-taller .rutas .tabs {
    border-radius: 18px;
    background: rgba(var(--t-tinta-rgb), 0.05);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 1px 2px rgba(var(--t-tinta-rgb), 0.06);
}

body.tema-taller .rutas .tabs .t-lente { border-radius: 14px; }

/* --- Switch de estatus (órdenes de servicio) --- */
body.tema-taller .estatus-switch.t-lente-on {
    padding: 4px;
    gap: 4px;
    border-radius: 16px;
    background: rgba(var(--t-tinta-rgb), 0.05);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 1px 2px rgba(var(--t-tinta-rgb), 0.06);
}

body.tema-taller .estatus-switch.t-lente-on button,
body.tema-taller .estatus-switch.t-lente-on button.activo,
body.tema-taller .estatus-switch.t-lente-on button:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
    color: var(--t-tinta-2);
}

body.tema-taller .estatus-switch.t-lente-on button.activo { color: var(--t-tinta); }

/* --- Opciones segmentadas (radios como tarjetas) --- */
body.tema-taller .segmented.t-lente-on {
    padding: 4px;
    gap: 4px;
    border-radius: 16px;
    background: rgba(var(--t-tinta-rgb), 0.05);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 1px 2px rgba(var(--t-tinta-rgb), 0.06);
}

body.tema-taller .segmented.t-lente-on .segmented-option,
body.tema-taller .segmented.t-lente-on .segmented-option:hover,
body.tema-taller .segmented.t-lente-on .segmented-option:has(input:checked) {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

body.tema-taller .segmented.t-lente-on .t-lente { border-radius: 12px; }

/* --- Barra inferior del portal de ruta --- */
body.tema-taller .rt-tabs.t-lente-on .t-lente { border-radius: 18px; }
body.tema-taller .rt-tabs.t-lente-on button,
body.tema-taller .rt-tabs.t-lente-on button.on { background: transparent; box-shadow: none; }

/* ================================================================
   AJUSTES PEDIDOS
   ================================================================ */

/* Indicadores y la tabla de abajo ya no se pegan */
body.tema-taller .dashboard-grid { margin-bottom: 1.25rem; }
body.tema-taller .dashboard-grid + .card,
body.tema-taller .dashboard-grid + .tab-content { margin-top: 0; }

/* Los botones con texto dentro de una tabla no son fichas de ícono */
body.tema-taller .action-buttons .btn,
body.tema-taller table.dataTable td .btn {
    width: auto;
    height: auto;
    min-height: 34px;
    padding: 0.42rem 0.85rem !important;
    font-size: 0.8rem !important;
    border-radius: 10px;
    white-space: nowrap;
}

body.tema-taller .action-buttons .btn-primary,
body.tema-taller table.dataTable td .btn-primary {
    background: var(--t-acento);
    color: #fff;
    border: 1px solid var(--t-acento-hondo);
}

body.tema-taller .action-buttons .btn-primary:hover,
body.tema-taller table.dataTable td .btn-primary:hover { background: #c4341f; color: #fff; }

/* ================================================================
   MENÚ PLEGADO (escritorio)
   aside.css pone la lista en overflow:visible para que los
   submenús floten a la derecha; con eso la lista no se desplaza y
   empuja "Cerrar sesión" fuera de la pantalla. Aquí la lista se
   desplaza sola y los flotantes usan position:fixed: el aside tiene
   backdrop-filter, así que es su bloque contenedor y no los recorta
   la lista. js/tema-taller.js les pasa la altura con --t-y / --t-yc.
   ================================================================ */
@media (min-width: 993px) {
    body.tema-taller.desktop-collapsed .aside-menu .divLogo { height: 68px; padding: 10px; }

    body.tema-taller.desktop-collapsed .aside-menu .lista-aside {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 8px 0 12px !important;
        scrollbar-width: none;
    }

    body.tema-taller.desktop-collapsed .aside-menu .lista-aside::-webkit-scrollbar { display: none; }

    body.tema-taller.desktop-collapsed .aside-menu .lista-aside li a {
        justify-content: center;
        padding: 0.62rem 0;
        margin: 2px 14px;
    }

    body.tema-taller.desktop-collapsed .aside-menu .lista-aside li a i.fa-solid,
    body.tema-taller.desktop-collapsed .aside-menu .lista-aside li a i.fa-brands { margin-right: 0; }

    body.tema-taller.desktop-collapsed .aside-menu .menu-separator { margin: 6px 22px; }

    body.tema-taller.desktop-collapsed .aside-menu .aside-footer { padding: 10px 14px 14px; flex-shrink: 0; }
    body.tema-taller.desktop-collapsed .aside-menu .aside-footer .logout-button { padding: 0.6rem 0; }
    body.tema-taller.desktop-collapsed .aside-menu .aside-footer .btn-tutorial-aside { margin-bottom: 6px !important; }

    /* Submenú flotante */
    body.tema-taller.desktop-collapsed .aside-menu .has-submenu:hover .submenu {
        position: fixed;
        top: var(--t-y, 0);
        left: calc(var(--ancho-sidebar-mini, 80px) - 6px);
        width: 230px;
        padding: 6px;
        border-radius: 16px;
        /* Un backdrop-filter dentro del aside (que ya tiene el suyo) no
           desenfoca lo de atrás: el vidrio aquí va casi opaco. */
        background: linear-gradient(165deg, #fffefb 0%, #fbf6ef 100%);
        border: 1px solid rgba(255, 255, 255, 0.9);
        box-shadow: inset 0 1px 0 #fff, 0 24px 48px -20px rgba(var(--t-tinta-rgb), 0.45);
    }

    body.tema-taller.desktop-collapsed .aside-menu .has-submenu:hover .submenu li a {
        justify-content: flex-start;
        margin: 1px 0;
        padding: 0.55rem 0.8rem;
        border-radius: 10px;
    }

    body.tema-taller.desktop-collapsed .aside-menu .has-submenu:hover .submenu li a i.fa-solid,
    body.tema-taller.desktop-collapsed .aside-menu .has-submenu:hover .submenu li a i.fa-brands { margin-right: 10px; }

    body.tema-taller.desktop-collapsed .aside-menu .has-submenu:hover .submenu li.active > a {
        background: var(--t-tinta) !important;
        color: #fff !important;
    }

    body.tema-taller.desktop-collapsed .aside-menu .has-submenu:hover .submenu li.active > a .nav-label { color: #fff !important; }

    /* Etiqueta flotante de cada opción */
    body.tema-taller.desktop-collapsed .aside-menu .lista-aside li:not(.has-submenu):hover .nav-label {
        position: fixed;
        top: var(--t-yc, 0);
        left: var(--ancho-sidebar-mini, 80px);
        margin-left: 6px;
        transform: translateY(-50%);
        padding: 6px 12px;
        border-radius: 10px;
        background: var(--t-tinta);
        color: #fff;
        font-size: 0.82rem;
        font-weight: 600;
        box-shadow: 0 10px 22px -12px rgba(var(--t-tinta-rgb), 0.7);
    }
}