/* ===== Sistema de diseño "Gourmet" — antracita, blanco nieve, rojo carmesí, verde menta =====
   Los nombres de variables se mantienen del sistema anterior a propósito
   (varias páginas usan var(--color-...) inline) — solo cambian los valores:
   --color-navy ahora es el antracita, --color-gold ahora es el verde menta. */
@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: #F8F9FA;

    --color-gold: #3FC996;
    --color-gold-light: #DAF5EA;

    --color-success: #16A34A;
    --color-success-bg: #DCFCE7;
    --color-warning: #F59E0B;
    --color-warning-bg: #FEF3C7;
    --color-error: #E8543D;
    --color-error-bg: #FCE7E3;
    --color-text-muted: #6B7280;
    --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 30px rgba(30,30,36,.18);
    --shadow-primary: 0 6px 16px rgba(196,30,58,.35);
    --shadow-navy: 0 6px 16px rgba(30,30,36,.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 / hero: fondo antracita, tipografía blanca, acento carmesí→menta */
.header {
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-mid) 100%);
    color: var(--color-white);
    padding: 20px 15px;
    border-radius: var(--radius-lg);
    margin-bottom: 18px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    border-bottom: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--color-primary), var(--color-gold)) 1;
}

.header img { max-width: 220px; width: 100%; display: block; margin: 0 auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.estado-servidor { font-size: 11px; margin-top: 8px; opacity: 0.85; }

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

/* Catálogo / contenido: fondo blanco nieve, tarjetas limpias sin distracción de color */
.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í) */
.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 — acciones importantes, no destructivas (antracita) */
.btn-negro { background-color: var(--color-navy); color: var(--color-white); box-shadow: var(--shadow-navy); }
.btn-negro:hover { background-color: var(--color-navy-mid); box-shadow: 0 8px 20px rgba(30,30,36,.45); }
/* Terciario / ghost — soporte, cancelar, limpiar */
.btn-gris { background-color: transparent; background-image: none; color: var(--color-navy); border: 1.5px solid var(--color-border); box-shadow: none; }
.btn-gris:hover { background-color: var(--color-off-white); border-color: var(--color-primary); transform: none; }
/* 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-navy); 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);
}
/* Verde menta: reservado para el estado "en curso" — detalle llamativo, se gana su lugar por ser escaso */
.etiqueta-badge.asignado { background: var(--color-gold); color: var(--color-navy); 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; }

@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; }
    /* 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; }
}