:root {
    --pt-ink: #16202b;
    --pt-steel: #4a5b6d;
    --pt-line: #dde3ea;
    --pt-bg: #f4f6f9;
    --pt-accent: #c2410c;
    --pt-accent-dark: #9a3412;
}

body {
    background: var(--pt-bg);
    color: var(--pt-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding-bottom: 3rem;
}

/* --- Cabecera ---------------------------------------------------------- */

.pt-navbar {
    background: var(--pt-ink);
}

.pt-navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
}

.pt-navbar .navbar-brand span {
    color: var(--pt-accent);
}

.pt-navbar .nav-link {
    color: rgba(255, 255, 255, .75);
    font-weight: 500;
}

.pt-navbar .nav-link:hover,
.pt-navbar .nav-link.active {
    color: #fff;
}

/* --- Aviso de corte ---------------------------------------------------- */

.pt-cutoff {
    background: linear-gradient(90deg, var(--pt-accent) 0%, var(--pt-accent-dark) 100%);
    color: #fff;
    font-size: .95rem;
}

/* Banner amarillo permanente cuando se esta impersonando a otro usuario.
   Debe destacar sobre el resto sin robar el foco visual de la operativa. */
.pt-impersonate {
    background: #fef3c7;
    color: #78350f;
    border-bottom: 2px solid #f59e0b;
    font-size: .95rem;
}

.pt-cutoff.is-late {
    background: linear-gradient(90deg, #475569 0%, #334155 100%);
}

.pt-cutoff a {
    color: #fff;
}

.pt-countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: .04em;
}

/* --- Tarjetas de catalogo ---------------------------------------------- */

.pt-card {
    background: #fff;
    border: 1px solid var(--pt-line);
    border-radius: .6rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s ease, transform .15s ease;
}

.pt-card:hover {
    box-shadow: 0 .5rem 1.25rem rgba(22, 32, 43, .09);
    transform: translateY(-2px);
}

.pt-sku {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    color: var(--pt-steel);
}

/* --- Imagenes de articulo ---------------------------------------------- */

/* Marco cuadrado: la miniatura ya viene cuadrada, pero el marcador SVG y las
   imagenes antiguas no, y sin esto la rejilla del catalogo baila. */
.pt-thumb {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fff;
    border-radius: .6rem .6rem 0 0;
    overflow: hidden;
}

.pt-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.pt-thumb-badge {
    position: absolute;
    top: .5rem;
    right: .5rem;
}

/* Miniatura en linea: carrito, pedidos y almacen. */
.pt-thumb-sm {
    width: 3.25rem;
    height: 3.25rem;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--pt-line);
    border-radius: .35rem;
    flex-shrink: 0;
}

.pt-thumb-pick {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--pt-line);
    border-radius: .4rem;
    flex-shrink: 0;
}

.pt-thumb-lg {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--pt-line);
    border-radius: .6rem;
}

.pt-price {
    font-size: 1.35rem;
    font-weight: 700;
}

.pt-price-strike {
    text-decoration: line-through;
    color: #94a3b8;
    font-size: .85rem;
}

/* --- Almacen: pensado para dedo gordo y guantes ------------------------ */

.pt-pick-line {
    border: 1px solid var(--pt-line);
    border-left: 5px solid #cbd5e1;
    border-radius: .5rem;
    background: #fff;
    margin-bottom: .6rem;
}

.pt-pick-line[data-status="preparado"] {
    border-left-color: #16a34a;
    background: #f0fdf4;
}

.pt-pick-line[data-status="incidencia"] {
    border-left-color: #dc2626;
    background: #fef2f2;
}

.pt-location {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.05rem;
    font-weight: 700;
    background: var(--pt-ink);
    color: #fff;
    border-radius: .35rem;
    padding: .15rem .5rem;
    display: inline-block;
}

.pt-qty {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.pt-pick-btn {
    min-height: 3rem;
    font-weight: 600;
}

/* Botones de la linea de picking: se muestran los que tocan segun su estado,
   de modo que el JS solo tenga que cambiar data-status. */
.pt-pick-line[data-status="pendiente"] [data-when="hecho"],
.pt-pick-line:not([data-status="pendiente"]) [data-when="pendiente"] {
    display: none !important;
}

.pt-order-card {
    border: 1px solid var(--pt-line);
    border-radius: .6rem;
    background: #fff;
}

.pt-progress {
    height: .5rem;
}

/* --- Varios ------------------------------------------------------------ */

.pt-panel {
    background: #fff;
    border: 1px solid var(--pt-line);
    border-radius: .6rem;
}

.pt-muted {
    color: var(--pt-steel);
}

.pt-table th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pt-steel);
    font-weight: 600;
}

.pt-stat {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
}

.pt-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #16202b 0%, #24313f 100%);
}

@media (max-width: 576px) {
    .pt-stat {
        font-size: 1.4rem;
    }
}

/* --- Movil: menu de familias plegable ---------------------------------- */

/* Menu de familias colapsable en movil (checkbox + label, sin JS).
   El checkbox va oculto; el label lo toca por el `for=`. En escritorio, el
   label desaparece y la lista se muestra siempre. */
.pt-familia-check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .pt-familia-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        padding: .25rem;
        margin: 0;
    }
    .pt-familia-chevron {
        transition: transform .15s ease;
        color: var(--pt-steel);
    }
    .pt-familia-check:checked ~ .pt-familia-summary .pt-familia-chevron {
        transform: rotate(180deg);
    }
    .pt-familia-body {
        display: none;
        margin-top: .5rem;
    }
    .pt-familia-check:checked ~ .pt-familia-body {
        display: block;
    }
}

@media (min-width: 768px) {
    .pt-familia-summary {
        display: none;
    }
    .pt-familia-body {
        display: block;
    }

    /* Sidebar del catalogo pegado al hacer scroll.
       El navbar principal es sticky (~56px). Dejamos ~5rem para no pegar el
       menu a el, y limitamos la altura a lo que cabe en pantalla dando scroll
       PROPIO al sidebar si el menu es mas largo. En movil no aplica: el menu
       ya es colapsable con checkbox y no hay problema de scroll. */
    .pt-sidebar-sticky {
        position: sticky;
        top: 5rem;
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
        /* Un pelin de padding a la derecha para que el scrollbar propio no
           pegue con el borde derecho del sidebar. */
        padding-right: .25rem;
    }
    /* Estetica: barra de scroll fina si el navegador lo permite. */
    .pt-sidebar-sticky::-webkit-scrollbar { width: 6px; }
    .pt-sidebar-sticky::-webkit-scrollbar-thumb {
        background: #cbd5e1; border-radius: 3px;
    }
}

/* --- Movil: tablas apiladas (carrito, checkout, pedido) ---------------- */

/* Cada fila se convierte en un bloque, el thead desaparece y cada celda
   pinta su etiqueta con data-label. Es lo unico que hace que el carrito
   se pueda usar de verdad en el movil, sin scroll horizontal. */
@media (max-width: 767.98px) {
    .pt-stack-mobile-wrap {
        overflow: visible !important;
    }
    .pt-stack-mobile,
    .pt-stack-mobile > thead,
    .pt-stack-mobile > tbody,
    .pt-stack-mobile > tfoot,
    .pt-stack-mobile > tbody > tr,
    .pt-stack-mobile > tfoot > tr,
    .pt-stack-mobile td {
        display: block;
        width: 100%;
        max-width: 100%;
    }
    .pt-stack-mobile > thead {
        display: none;
    }
    .pt-stack-mobile > tbody > tr {
        border: 1px solid var(--pt-line);
        border-radius: .5rem;
        padding: .5rem;
        margin-bottom: .6rem;
        background: #fff;
    }
    .pt-stack-mobile td {
        border: 0 !important;
        padding: .35rem .25rem !important;
        text-align: left !important;
        white-space: normal !important;
    }
    /* Etiqueta y valor en la misma linea, con el valor pegado a la derecha. */
    .pt-stack-mobile td[data-label] {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
    }
    .pt-stack-mobile td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--pt-steel);
        font-weight: 600;
    }
    /* La primera celda (articulo) no lleva etiqueta y ocupa el ancho entero. */
    .pt-stack-mobile > tbody > tr > td:first-child {
        border-bottom: 1px solid var(--pt-line) !important;
        padding-bottom: .5rem !important;
        margin-bottom: .35rem;
    }
    .pt-stack-mobile td[data-label="Importe"]::before,
    .pt-stack-mobile td[data-label="Total"]::before {
        color: var(--pt-ink);
    }
    /* El tfoot de totales se muestra como bloque simple sin borde de tarjeta. */
    .pt-stack-mobile > tfoot > tr {
        border-top: 2px solid var(--pt-line);
        padding-top: .5rem;
    }
    .pt-stack-mobile > tfoot .text-end {
        text-align: left !important;
    }
    /* Anchura de miniatura acotada dentro de la celda */
    .pt-stack-mobile .pt-thumb-sm {
        vertical-align: middle;
    }
}

/* --- Calendario de la carga (castellano, solo laborables) -------------- */

.pt-cal-menu {
    min-width: 17rem;
}

.pt-cal-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

.pt-cal-title {
    flex: 1;
    text-align: center;
    font-weight: 600;
    text-transform: capitalize;
}

.pt-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.pt-cal-dow {
    text-align: center;
    font-size: .75rem;
    font-weight: 600;
    color: var(--pt-steel);
    padding-bottom: .25rem;
}

.pt-cal-day {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Objetivo tactil: el almacen usa esto con guantes en el movil. */
    min-height: 2.25rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: var(--pt-ink);
    font-size: .95rem;
}

button.pt-cal-day:hover {
    background: var(--pt-bg);
    border-color: var(--pt-line);
}

.pt-cal-day.is-today {
    border-color: var(--pt-accent);
    font-weight: 700;
}

.pt-cal-day.is-selected {
    background: var(--pt-ink);
    border-color: var(--pt-ink);
    color: #fff;
    font-weight: 700;
}

/* Fines de semana y festivos: se ven, pero no se pueden elegir. */
.pt-cal-day.is-off {
    color: #b6c0cb;
    cursor: not-allowed;
}

.pt-cal-day.is-off.is-selected {
    background: #b6c0cb;
    border-color: #b6c0cb;
    color: #fff;
}

.pt-cal-foot {
    margin-top: .5rem;
    font-size: .75rem;
    color: var(--pt-steel);
    text-align: center;
}

@media print {
    .pt-navbar,
    .pt-cutoff,
    .no-print {
        display: none !important;
    }

    body {
        background: #fff;
        padding: 0;
    }

    .pt-panel {
        border: none;
    }
}