/* ===== Sistema de diseño "CCP Carnes" — crema, gris pizarra, rojo carmesí, tinta =====
   Paleta tomada del isologo real (anillo metálico gris pizarra, "CCP" en
   rojo carmesí, fondo crema). El header ahora es crema para que el logo
   quede integrado, sin el recuadro oscuro de la versión anterior. El negro
   sólido de los botones secundarios pasa a gris pizarra (del anillo del
   logo) para no depender solo de negro+rojo.
   Los nombres de variables se mantienen del sistema anterior a propósito
   (varias páginas usan var(--color-...) inline) — solo cambian los valores. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --color-primary: #C41E3A;
    --color-primary-dark: #9E1730;
    --color-primary-light: #F7DCE1;

    --color-navy: #1E1E24;
    --color-navy-mid: #2E2E37;
    --color-white: #FFFFFF;
    --color-off-white: #F4F2EC;

    --color-slate: #708090;
    --color-slate-dark: #5A6672;
    --color-slate-light: #E7EAED;

    --color-gold: #708090;
    --color-gold-light: #E7EAED;

    --color-success: #16A34A;
    --color-success-bg: #DCFCE7;
    --color-warning: #F59E0B;
    --color-warning-bg: #FEF3C7;
    --color-error: #E8543D;
    --color-error-bg: #FCE7E3;
    --color-text-muted: #4B5261;
    --color-border: #E2E5E9;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --shadow-sm: 0 1px 3px rgba(30,30,36,.08);
    --shadow-md: 0 4px 14px rgba(30,30,36,.10);
    --shadow-lg: 0 10px 26px rgba(30,30,36,.12);
    --shadow-primary: 0 6px 16px rgba(196,30,58,.35);
    --shadow-navy: 0 6px 16px rgba(112,128,144,.35);
    --shadow-success: 0 6px 16px rgba(22,163,74,.30);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

a { color: inherit; text-decoration: none; }

body {
    font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--color-off-white);
    color: var(--color-navy);
    padding: 15px;
    letter-spacing: 0.01em;
}

.container { max-width: 900px; margin: 0 auto; }
.container.ancho { max-width: 1300px; }

/* Header: crema, igual que el fondo del isologo, para que quede integrado
   sin recuadro — el acento carmesí/pizarra queda en la línea inferior. */
.header {
    background: var(--color-off-white);
    color: var(--color-navy);
    padding: 16px 15px 14px;
    border-radius: var(--radius-lg);
    margin-bottom: 18px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
    border-bottom: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--color-primary), var(--color-slate)) 1;
}

/* Sin max-width a propósito: el logo tiene que ocupar todo el ancho
   disponible del header, sea la página angosta (kiosco, login) o ancha
   (Administración, Preparación, etc.) — así nunca queda espacio libre a
   los costados, sin necesitar un valor distinto por página. */
.header img { width: 100%; display: block; margin: 0 auto; }
.estado-servidor { font-size: 11px; margin-top: 6px; color: var(--color-text-muted); }

.barra-usuario {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
}
.barra-usuario a { color: var(--color-primary); text-decoration: underline; cursor: pointer; font-weight: 600; }

.panel {
    background: var(--color-white);
    padding: 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    margin-bottom: 16px;
}

.panel h2 {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 14px;
    color: var(--color-navy);
    border-bottom: 3px solid var(--color-primary);
    padding-bottom: 10px;
}

label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 5px; color: var(--color-navy); text-transform: uppercase; letter-spacing: 0.03em; }

input, textarea, select {
    width: 100%;
    padding: 11px 12px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 12px;
    font-family: inherit;
    background: var(--color-white);
    color: var(--color-navy);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea#mensaje { height: 120px; resize: vertical; background: var(--color-off-white); }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-light);
}

.fila-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fila-triple { display: grid; grid-template-columns: 2fr 1fr auto; gap: 10px; align-items: start; }

.botones { display: flex; gap: 10px; flex-wrap: wrap; }

button {
    flex: 1;
    min-width: 120px;
    padding: 13px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.01em;
    font-family: inherit;
    background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 60%);
    box-shadow: var(--shadow-sm);
    transition: background 0.15s ease, filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
button:hover { transform: translateY(-1px); }
button:active { transform: translateY(0); filter: brightness(0.96); }

/* Primario — la acción principal de la pantalla (rojo carmesí, del isologo) */
.btn-rojo-p { background-color: var(--color-primary); color: var(--color-white); box-shadow: var(--shadow-primary); }
.btn-rojo-p:hover { background-color: var(--color-primary-dark); box-shadow: 0 8px 20px rgba(196,30,58,.45); }
/* Secundario — gris pizarra, el color del anillo del isologo (no negro liso) */
.btn-negro { background-color: var(--color-slate); color: var(--color-white); box-shadow: var(--shadow-navy); }
.btn-negro:hover { background-color: var(--color-slate-dark); box-shadow: 0 8px 20px rgba(90,102,114,.45); }
/* Terciario — soporte, cancelar, limpiar. Mismo tono que el secundario
   (gris pizarra) para que se vea como botón de verdad, no como un hueco
   transparente sobre el panel blanco. */
.btn-gris { background-color: var(--color-slate); color: var(--color-white); border: none; box-shadow: var(--shadow-navy); }
.btn-gris:hover { background-color: var(--color-slate-dark); box-shadow: 0 8px 20px rgba(90,102,114,.45); }
/* Semántico: exportar / confirmar dato positivo */
.btn-verde { background-color: var(--color-success); color: white; box-shadow: var(--shadow-success); }
.btn-verde:hover { filter: brightness(1.05); }
/* Semántico: destructivo */
.btn-eliminar { background-color: var(--color-error); background-image: none; color: white; padding: 5px 10px; font-size: 11px; flex: none; min-width: auto; box-shadow: none; }
.btn-chico { flex: none; min-width: auto; padding: 7px 13px; font-size: 11px; }

.pedido-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.pedido-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.pedido-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pedido-numero { font-weight: 800; color: var(--color-navy); font-size: 14px; }
.pedido-fecha { font-size: 11px; color: var(--color-text-muted); font-weight: 600; }
.pedido-cliente { font-size: 13px; font-weight: 700; margin-bottom: 4px; color: var(--color-navy); }
.pedido-texto {
    font-size: 12px; color: #3F3F46; white-space: pre-wrap; background: var(--color-off-white);
    border-radius: var(--radius-sm); padding: 9px; margin-bottom: 8px; max-height: 120px; overflow-y: auto;
}

.etiqueta-pago, .etiqueta-badge {
    display: inline-block; background: var(--color-slate); color: white; font-size: 11px; font-weight: 700;
    letter-spacing: 0.02em; padding: 4px 11px; border-radius: 20px; margin-bottom: 8px; margin-right: 4px;
    box-shadow: var(--shadow-sm);
}
/* Estado "en curso": resaltado suave en la familia del rojo primario */
.etiqueta-badge.asignado { background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 800; }

.acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.acciones button { flex: none; min-width: auto; padding: 9px 15px; font-size: 12px; }

.menu-opciones { display: flex; flex-direction: column; gap: 12px; }
.btn-mediano {
    display: block; width: 100%; padding: 20px; font-size: 16px;
    border-radius: var(--radius-lg); text-align: center;
}
.btn-mediano small { display: block; font-weight: 500; font-size: 11px; opacity: 0.85; margin-top: 4px; letter-spacing: 0.01em; }

.barra-superior { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.contador { font-size: 13px; color: var(--color-text-muted); font-weight: 600; }
.vacio { text-align: center; color: var(--color-text-muted); padding: 24px; font-size: 13px; }

.aviso { padding: 11px 15px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 12px; display: none; font-weight: 700; box-shadow: var(--shadow-sm); }
.aviso.ok { background: var(--color-success-bg); color: var(--color-success); display: block; }
.aviso.error { background: var(--color-error-bg); color: var(--color-error); display: block; }

details { margin-bottom: 15px; }
summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--color-navy); padding: 8px 0; }

/* Las tablas anchas (Admin, Reporte) van adentro de este contenedor: en
   pantallas chicas scrollea solo la tabla, no la página entera. */
.tabla-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
th { background: var(--color-off-white); color: var(--color-navy); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
tr:hover td { background: var(--color-off-white); }
tr:last-child td { border-bottom: none; }

.tablero { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.columna { background: var(--color-off-white); border-radius: var(--radius-lg); padding: 12px; border: 1px solid var(--color-border); }
.columna h3 { font-size: 13px; font-weight: 800; color: var(--color-navy); margin-bottom: 12px; text-align: center; text-transform: uppercase; letter-spacing: 0.03em; }

.item-fila { display: grid; grid-template-columns: 2fr 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.item-fila input { margin-bottom: 0; }

/* Grilla de código manual: código, descripción (autocompletada, solo
   lectura), cantidad y el botón de agregar. */
.fila-codigo-manual { display: grid; grid-template-columns: 1fr 2fr 1fr auto; gap: 8px; align-items: center; margin-bottom: 12px; }
.fila-codigo-manual input { margin-bottom: 0; }
.fila-codigo-manual input[readonly] { background: var(--color-off-white); color: var(--color-text-muted); }

/* Línea armada leyendo el código de barras de la balanza (peso real, no
   tipeado a mano) — mismo resaltado sutil que usan los badges "en curso". */
.item-fila.balanza { background: var(--color-primary-light); border-radius: var(--radius-sm); padding: 4px; margin: 0 -4px 8px -4px; }

@media (max-width: 600px) {
    body { padding: 8px; }
    button { min-width: 100px; }
    .fila-doble, .fila-triple { grid-template-columns: 1fr; gap: 0; }
    .item-fila { grid-template-columns: 1fr; }
    .fila-codigo-manual { grid-template-columns: 1fr; }
    /* Encabezados tipo "Título + botones" (Reporte, Recibidos, Admin): en
       pantallas chicas un botón con texto largo puede no encoger dentro de
       una fila flex anidada y empujar todo el ancho de la página. Apilar
       resuelve el problema de raíz sin depender de que el texto quepa. */
    .barra-superior { flex-direction: column; align-items: stretch; }
    .barra-superior .botones { width: 100%; }
    .barra-superior .botones button { flex: 1; min-width: 0; }
}