/* ============================================
   PALETA Y VARIABLES GLOBALES
   ============================================ */
:root {
   --campo-verde-oscuro: #2d5016;
   --campo-verde-medio: #4a7c2e;
   --campo-verde-claro: #8bc34a;
   --campo-marron-oscuro: #4e342e;
   --campo-marron-medio: #795548;
   --campo-marron-claro: #a98467;
   --campo-crema: #faf7f2;
   --campo-arena: #e8e0d4;
   --campo-texto: #2c3e2d;
   --campo-texto-suave: #5a6b5d;
}

/* ============================================
   FONDO GENERAL
   ============================================ */
body {
   background: linear-gradient(180deg, var(--campo-crema) 0%, #f5f1e8 100%) !important;
   color: var(--campo-texto);
}

.t-Body, .t-Body-main, .t-Body-content {
   background: transparent !important;
}

/* ============================================
   HEADER DE ESTABLECIMIENTO
   ============================================ */
.header-establecimiento {
   background: linear-gradient(135deg, var(--campo-verde-medio) 0%, var(--campo-verde-oscuro) 100%);
   color: white;
   padding: 14px 24px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.15);
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 24px;
}

.header-establecimiento .icono-marker {
   font-size: 1.3em;
   margin-right: 10px;
   opacity: 0.9;
}

.header-establecimiento .nombre-estab {
   font-weight: 700;
   font-size: 1.1em;
}

.header-establecimiento .link-cambiar {
   color: white;
   opacity: 0.85;
   font-size: 0.9em;
   text-decoration: none;
   padding: 6px 14px;
   border: 1px solid rgba(255,255,255,0.4);
   border-radius: 20px;
   transition: all 0.2s;
}
.header-establecimiento .link-cambiar:hover {
   background: rgba(255,255,255,0.2);
   opacity: 1;
}

/* ============================================
   SALUDO PRINCIPAL
   ============================================ */
.saludo-region {
   background: white;
   border-radius: 16px;
   padding: 32px 20px;
   margin-bottom: 28px;
   box-shadow: 0 2px 12px rgba(45, 80, 22, 0.08);
   text-align: center;
   border: 1px solid var(--campo-arena);
}

.saludo-region h1 {
   font-size: 1.9em;
   font-weight: 700;
   margin: 0 0 8px 0;
   color: var(--campo-verde-oscuro);
}

.saludo-region .pregunta {
   color: var(--campo-texto-suave);
   font-size: 1.05em;
   margin: 0;
}

/* ============================================
   CARDS DEL MENÚ
   ============================================ */
.a-CardView-items {
   gap: 14px !important;
}

.a-CardView-item {
   background: white !important;
   border-radius: 14px !important;
   border: 1px solid var(--campo-arena) !important;
   box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
   transition: all 0.25s ease !important;
   min-height: 88px !important;
}

.a-CardView-item:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(45, 80, 22, 0.15) !important;
   border-color: var(--campo-verde-claro) !important;
   cursor: pointer;
}

.a-CardView-itemWrap {
   padding: 16px 18px !important;
}

.a-CardView-title {
   font-size: 1.05em !important;
   font-weight: 600 !important;
   color: var(--campo-texto) !important;
}

/* ============================================
   ÍCONOS DE LAS CARDS
   ============================================ */
.a-CardView-iconContainer,
.a-Card-icon {
   width: 54px !important;
   height: 54px !important;
   font-size: 1.5em !important;
   border-radius: 14px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   margin-right: 18px !important;
   box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.op-verde-oscuro .a-CardView-iconContainer { background: linear-gradient(135deg, #2d5016, #1b3a0a) !important; color: white !important; }
.op-verde-medio .a-CardView-iconContainer { background: linear-gradient(135deg, #4a7c2e, #2d5016) !important; color: white !important; }
.op-verde-claro .a-CardView-iconContainer { background: linear-gradient(135deg, #8bc34a, #689f38) !important; color: white !important; }
.op-marron-claro .a-CardView-iconContainer { background: linear-gradient(135deg, #a98467, #795548) !important; color: white !important; }
.op-marron-medio .a-CardView-iconContainer { background: linear-gradient(135deg, #795548, #5d4037) !important; color: white !important; }
.op-marron-oscuro .a-CardView-iconContainer { background: linear-gradient(135deg, #4e342e, #3e2723) !important; color: white !important; }
.op-amarillo .a-CardView-iconContainer { background: linear-gradient(135deg, #fdd835, #f9a825) !important; color: white !important; }
.op-naranja .a-CardView-iconContainer { background: linear-gradient(135deg, #ff8a65, #e64a19) !important; color: white !important; }
.op-rojo-claro .a-CardView-iconContainer { background: linear-gradient(135deg, #ef5350, #c62828) !important; color: white !important; }
.op-rojo .a-CardView-iconContainer { background: linear-gradient(135deg, #c62828, #8b0000) !important; color: white !important; }
.op-rojo-oscuro .a-CardView-iconContainer { background: linear-gradient(135deg, #8b0000, #5d0000) !important; color: white !important; }

/* ============================================
   FLASH VISUAL para lectura RFID
   ============================================ */
@keyframes flashOK { 0% { background-color: #4caf50; } 100% { background-color: transparent; } }
@keyframes flashKO { 0% { background-color: #f44336; } 100% { background-color: transparent; } }
.flash-ok { animation: flashOK 0.4s ease-out; }
.flash-ko { animation: flashKO 0.4s ease-out; }

/* ============================================
   INDICADOR ONLINE/OFFLINE (PWA)
   ============================================ */
.barra-conexion {
   padding: 8px 16px;
   background: #f5f5f5;
   border-radius: 8px;
   margin-bottom: 16px;
   display: flex;
   gap: 16px;
   align-items: center;
   font-size: 0.9em;
}
.conexion-ok { color: #2d5016; font-weight: 600; }
.conexion-offline { color: #c62828; font-weight: 700; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0.4; } }

#contador-pendientes {
   background: #f9a825;
   color: white;
   padding: 4px 12px;
   border-radius: 12px;
   font-weight: 600;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 640px) {
   .header-establecimiento { padding: 12px 16px; font-size: 0.95em; }
   .saludo-region { padding: 24px 16px; }
   .saludo-region h1 { font-size: 1.6em; }
   .a-CardView-item { min-height: 76px !important; }
   .a-CardView-iconContainer { width: 46px !important; height: 46px !important; font-size: 1.3em !important; }
}