/* Estilos propios de PlazaPerú (complementan a Tailwind) */

/* ---- Colores del tema (canales RGB para Tailwind: rgb(var(--x) / alfa), ver tailwind.config en cabecera.php) ---- */
:root {
    --principal: 108 0 0;          /* #6C0000 */
    --principal-oscuro: 74 0 0;    /* #4A0000 */
    --crema: 251 239 239;          /* #FBEFEF */
    --n50: 250 250 250; --n100: 245 245 245; --n200: 229 229 229; --n300: 212 212 212; --n400: 163 163 163;
    --n500: 115 115 115; --n600: 82 82 82; --n700: 64 64 64; --n800: 38 38 38; --n900: 23 23 23; --n950: 10 10 10;
    --superficie: #ffffff;
}
/* Modo oscuro: fondo vino casi negro, grises invertidos con un toque cálido, rojo más vivo y dorado para realzar */
html.oscuro {
    color-scheme: dark;
    --principal: 200 30 44;        /* #C81E2C: botones y bandas */
    --principal-oscuro: 160 18 32;
    --crema: 58 22 27;             /* fondos suaves: vino profundo */
    --n50: 40 31 31; --n100: 18 13 13; --n200: 62 50 50; --n300: 84 70 70; --n400: 140 126 126;
    --n500: 172 160 160; --n600: 200 191 191; --n700: 222 215 215; --n800: 238 233 233; --n900: 246 243 243; --n950: 252 250 250;
    --superficie: #201818;
    --realce: #FF6B6B;             /* textos y precios en rojo */
    --realce-suave: #FF9B9B;
}

/* Menús desplegables de la cabecera: se abren al pasar el mouse o al enfocar con el teclado */
.menu-flotante {
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 50;
}
.group:hover > .menu-flotante,
.group:focus-within > .menu-flotante {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f5f5f5; }
::-webkit-scrollbar-thumb { background: #c9c9c9; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #6C0000; }

/* Sobre fondos oscuros el rojo principal (#6C0000) no contrasta: sus acentos pasan al dorado del logotipo */
.bg-tinta .text-principal,
.bg-tinta\/90 .text-principal,
.bg-gradient-to-t .text-principal,
.bg-tinta .hover\:text-principal:hover,
.bg-tinta .group:hover .group-hover\:text-principal,
.bg-tinta.group:hover .group-hover\:text-principal { color: #E3B04B; }
.bg-tinta .hover\:border-principal:hover { border-color: #E3B04B; }
.bg-tinta .bg-principal { background-color: #8A0F0F; }

/* Banda del encabezado: degradado de negro (lado del logotipo) a rojo oscuro (#6C0000) sobre un tejido andino estilizado (css/tejido.svg) */
.banda-tejido {
    background-color: #3A0000;
    background-image:
        linear-gradient(90deg, rgba(0, 0, 0, .93) 0%, rgba(10, 0, 0, .90) 20%, rgba(70, 0, 0, .85) 55%, rgba(108, 0, 0, .80) 100%),
        url("tejido.svg");
    background-size: auto, 80px 80px;
    background-repeat: no-repeat, repeat;
    background-position: 0 0, 0 center;
    border-bottom: 3px solid #E3B04B;   /* hilo dorado como remate del tejido */
}

/* Campos de formulario */
.campo {
    width: 100%;
    height: 2.75rem;
    border: 1px solid #d4d4d4;
    border-radius: .75rem;
    padding: 0 .9rem;
    font-size: .875rem;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
textarea.campo { height: auto; padding: .7rem .9rem; }
.campo:focus { outline: none; border-color: #6C0000; box-shadow: 0 0 0 3px rgba(108, 0, 0, .15); }
.etiqueta { display: block; font-size: .75rem; font-weight: 700; color: #404040; margin-bottom: .3rem; }

/* Franja de banner de la portada */
.banner-plaza {
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .25) 0 60px, transparent 61px),
        radial-gradient(circle at 92% 85%, rgba(255, 255, 255, .15) 0 90px, transparent 91px),
        linear-gradient(110deg, #4A0000 0%, #6C0000 45%, #9E1B1B 100%);
}

/* Banner de la portada: solo el degradado (el adorno es el isotipo tenue en SVG) */
.banner-plaza.banner-isotipo {
    background: linear-gradient(110deg, #4A0000 0%, #6C0000 45%, #9E1B1B 100%);
}

/* Botón de tema de la cabecera: luna en modo claro, sol en modo oscuro */
.icono-tema-oscuro { display: none; }
html.oscuro .icono-tema-claro { display: none; }
html.oscuro .icono-tema-oscuro { display: inline-block; }

/* ====================== MODO OSCURO ======================
   Los grises de Tailwind ya cambian por las variables de arriba; aquí se ajusta lo que usa colores fijos. */
html.oscuro body { background-color: rgb(var(--n100)); color: #F3EDED; }

/* Superficies blancas (tarjetas, paneles, formularios) */
html.oscuro .bg-white { background-color: var(--superficie); }
html.oscuro .hover\:bg-white:hover { background-color: #2E2323; }
html.oscuro img.bg-white { background-color: #fff; }                 /* los logos se ven sobre blanco */
html.oscuro .bg-neutral-900\/80 { background-color: rgb(0 0 0 / .8); }
html.oscuro .shadow-sm, html.oscuro .shadow-md, html.oscuro .shadow-lg, html.oscuro .shadow-xl, html.oscuro .shadow-2xl { --tw-shadow-color: rgb(0 0 0 / .6); }
html.oscuro .hover\:shadow-xl:hover, html.oscuro .hover\:shadow-lg:hover { box-shadow: 0 10px 30px -8px rgb(255 107 107 / .18), 0 4px 12px rgb(0 0 0 / .5); }

/* Texto oscuro de marca → claro; rojos de texto → rojo vivo; acentos dorados se mantienen */
html.oscuro .text-tinta, html.oscuro .hover\:text-tinta:hover { color: #F3EDED; }
html.oscuro .text-neutral-900 { color: #FAF7F7; }
html.oscuro .text-principal,
html.oscuro .hover\:text-principal:hover,
html.oscuro .group:hover .group-hover\:text-principal { color: var(--realce); }
html.oscuro .text-principalOscuro { color: var(--realce-suave); }
html.oscuro .border-principal, html.oscuro .hover\:border-principal:hover { border-color: var(--realce); }
html.oscuro .peer:checked ~ .peer-checked\:border-principal { border-color: var(--realce); }
html.oscuro .border-tinta, html.oscuro .border-neutral-800 { border-color: #E9E1E1; }
html.oscuro .hover\:bg-tinta:hover, html.oscuro .peer:checked ~ .peer-checked\:bg-tinta { background-color: #F3EDED; color: #1A1212; }
html.oscuro .bg-tinta { background-color: #2A1F1F; }
html.oscuro .bg-tinta\/90, html.oscuro .bg-tinta\/95 { background-color: rgb(42 31 31 / .95); }

/* Avisos y etiquetas de colores: tintes translúcidos con texto claro */
html.oscuro .bg-emerald-50, html.oscuro .bg-emerald-100 { background-color: rgb(16 185 129 / .14); }
html.oscuro .bg-amber-50, html.oscuro .bg-amber-100 { background-color: rgb(245 158 11 / .14); }
html.oscuro .bg-amber-50\/50, html.oscuro .bg-amber-50\/40 { background-color: rgb(245 158 11 / .08); }
html.oscuro .bg-red-50, html.oscuro .bg-red-100 { background-color: rgb(239 68 68 / .14); }
html.oscuro .bg-sky-50, html.oscuro .bg-sky-100 { background-color: rgb(14 165 233 / .14); }
html.oscuro .bg-violet-50, html.oscuro .bg-violet-100 { background-color: rgb(139 92 246 / .18); }
html.oscuro .text-emerald-700, html.oscuro .text-emerald-800, html.oscuro .text-emerald-900 { color: #6EE7B7; }
html.oscuro .text-amber-700, html.oscuro .text-amber-800, html.oscuro .text-amber-900 { color: #FCD34D; }
html.oscuro .text-red-600, html.oscuro .text-red-700, html.oscuro .text-red-800 { color: #FCA5A5; }
html.oscuro .text-sky-700, html.oscuro .text-sky-800, html.oscuro .text-sky-900 { color: #7DD3FC; }
html.oscuro .text-violet-700, html.oscuro .text-violet-800 { color: #C4B5FD; }
html.oscuro .border-emerald-200, html.oscuro .border-emerald-400 { border-color: rgb(52 211 153 / .45); }
html.oscuro .border-amber-200, html.oscuro .border-amber-300 { border-color: rgb(251 191 36 / .55); }
html.oscuro .border-red-200 { border-color: rgb(248 113 113 / .45); }
html.oscuro .border-sky-200 { border-color: rgb(56 189 248 / .45); }
/* Insignia y etiquetas Gold: fondo dorado sólido con texto oscuro (no se aclaran) */
html.oscuro .bg-amber-200.text-amber-900, html.oscuro .bg-amber-300, html.oscuro .from-amber-300.text-amber-900 { color: #3B1F00; }
html.oscuro .ring-white { --tw-ring-color: var(--superficie); }
html.oscuro .ring-amber-100 { --tw-ring-color: rgb(251 191 36 / .25); }
html.oscuro .from-amber-50 { --tw-gradient-from: rgb(245 158 11 / .14) var(--tw-gradient-from-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html.oscuro .to-white { --tw-gradient-to: var(--superficie) var(--tw-gradient-to-position); }
html.oscuro .from-amber-200 { --tw-gradient-from: #7A5A12 var(--tw-gradient-from-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html.oscuro .to-yellow-100 { --tw-gradient-to: #4A3A10 var(--tw-gradient-to-position); }

/* Formularios */
html.oscuro .campo { background: #1A1313; border-color: #4A3C3C; color: #F3EDED; }
html.oscuro .campo::placeholder { color: #8C7E7E; }
html.oscuro .campo:focus { border-color: var(--realce); box-shadow: 0 0 0 3px rgb(255 107 107 / .2); }
html.oscuro .campo[readonly], html.oscuro .campo.bg-neutral-100 { background: #251C1C; color: #CFC4C4; }
html.oscuro .etiqueta { color: #E2D8D8; }
html.oscuro select option { background: #201818; color: #F3EDED; }

/* Barra de desplazamiento */
html.oscuro ::-webkit-scrollbar-track { background: #140F0F; }
html.oscuro ::-webkit-scrollbar-thumb { background: #4A3C3C; }
html.oscuro ::-webkit-scrollbar-thumb:hover { background: var(--realce); }