/* CubanStaff demo mockup — shared styles beyond Tailwind CDN */

:root {
  --midnight: #0A0F1D;
  --slate-deep: #1E293B;
  --ice: #F0F4F8;
  --primary: #2563EB;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--ice);
  color: #0f172a;
}

/* Candidate availability status — internal signal, hidden from employers/guests.
   app.js adds body.staff-view when the role is administrator or support. */
.staff-only { display: none !important; }
body.staff-view .staff-only { display: inline-flex !important; }

/* Block-level staff-only content (cards/sections; .staff-only forces inline-flex) */
.staff-block { display: none !important; }
body.staff-view .staff-block { display: block !important; }

/* Elements staff must NOT see (e.g. "Apply via platform" on the job board) */
body.staff-view .staff-hide { display: none !important; }

/* Staff sees locked contact data in the clear (directory cards & candidate profiles) */
body.staff-view .blurred {
  filter: none;
  user-select: auto;
  pointer-events: auto;
}

/* BORRADO 2026-08-15: el layout compacto del directorio para staff
   (body.staff-view #results > [data-candidate], filas en vez de tarjetas).
   Estaba roto y era una bomba de tiempo: las tarjetas de directory.astro
   llevan data-candidate-ID, no data-candidate, así que las reglas hijas nunca
   coincidieron — pero `body.staff-view #results { display:flex }` sí
   coincidía. Mientras la clase la ponía app.js desde localStorage nunca se
   notó; al pasar staff-view a server-side se habría activado sola y roto la
   grilla de /directory para admin y support: contenedor en columna flex con
   las tarjetas sin ninguna de las reglas que lo compensaban.
   Si el layout compacto se quiere de verdad, va en directory.astro con las
   utilidades de Tailwind y condicionado por el rol, no como override global. */

/* Locked contact info */
.blurred {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Subtle entrance animation */
.fade-up { animation: fadeUp .35s ease-out both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Modal */
.modal-backdrop { background: rgba(10, 15, 29, .65); backdrop-filter: blur(2px); }

/* Off-canvas drawer (dashboard sidebar on mobile) */
.drawer { transition: transform .25s ease; }

/* El sidebar venía con bg-midnight (#0A0F1D), casi negro. Un azul noche un poco
   más claro para que se lea como panel y no como un hueco. Va por #drawer para
   ganarle a la utilidad de Tailwind sin !important. */
#drawer { background-color: #16223C; }
@media (max-width: 1023px) {
  .drawer { transform: translateX(-100%); }
  .drawer.open { transform: translateX(0); }
}

/* BORRADO 2026-08-15 (174 líneas): .stars, .table-scroll, el switcher de rol
   flotante (.role-toggle/.rt-*) y el chat flotante (.chat-*). Los cuatro
   tenían cero referencias en src/ — los dos últimos solo los usaba el chrome
   que app.js inyectaba, y ese inyector se borró en la misma tanda. El chat en
   particular se mostraba en producción en todas las páginas y contestaba con
   un texto enlatado por setTimeout, sin mandar nada a ningún lado; el soporte
   real vive en /support con tickets. */

/* ---------- La mitad secundaria de un importe (components/Money.astro) ----------
   Con el guyanés adelante, cada monto tiene dos mitades: la local (grande, la
   que se lee) y la de USD (chica, la que se cobra). El USD NUNCA se oculta
   —price_items y credit_ledger son USD, y una pantalla que dijera solo GY$
   estaría diciendo algo distinto de lo que registra el ledger— pero tampoco
   compite por la atención.

   `em` y no `rem` a propósito: este mismo componente se usa a text-4xl en una
   tarjeta de precio y a text-xs en una fila de historial, y con `rem` la mitad
   chica quedaría más grande que el importe entero en el segundo caso. */
.ct-money-alt {
  font-size: 0.62em;
  font-weight: 600;
  opacity: 0.6;
  margin-left: 0.45em;
  white-space: nowrap;
}

/* ---------- <details> usado como menú (selector de moneda) ----------
   `list-none` de Tailwind apaga el marcador en los navegadores que lo dibujan
   como list-item, pero WebKit/Safari usa un pseudo-elemento PROPIO
   (::-webkit-details-marker) que ninguna utilidad de Tailwind alcanza. Sin
   esto, el selector de moneda muestra un triangulito antes del icono en
   Safari e iOS — o sea, justo en el móvil para el que se achicó.

   Va acá y no como un `[&::-webkit-details-marker]:hidden` en el markup por la
   regla de RULES.md §Frontend: el CSS a mano vive en este archivo. */
summary.list-none::-webkit-details-marker { display: none; }

/* ---------- Dark mode (html.dark, toggled via ct-theme) ----------
   Pages are authored light with Tailwind CDN utilities; rather than adding dark:
   variants to every class across 12+ static pages, the most common light-theme
   utilities are re-mapped here. Sections already on bg-midnight stay as-is. */

html.dark { background: #0A0F1D; color-scheme: dark; }
html.dark body { background: #0A0F1D; color: #E2E8F0; }

html.dark .bg-white { background-color: #111a2e !important; }
html.dark .bg-ice, html.dark .bg-slate-50, html.dark .bg-slate-100 { background-color: #0d1526 !important; }
html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-slate-100:hover { background-color: #1a2740 !important; }

html.dark .text-midnight, html.dark .text-slate-900, html.dark .text-slate-800 { color: #F0F4F8 !important; }
html.dark .text-slate-700, html.dark .text-slate-600 { color: #B6C2D6 !important; }
html.dark .text-slate-500 { color: #8B99B0 !important; }
html.dark .text-slate-400 { color: #74839C !important; }

html.dark .border-slate-100, html.dark .border-slate-200, html.dark .border-slate-300 { border-color: #263450 !important; }
html.dark .divide-slate-100 > *, html.dark .divide-slate-200 > * { border-color: #263450 !important; }

html.dark .shadow-sm, html.dark .shadow, html.dark .shadow-md, html.dark .shadow-lg, html.dark .shadow-xl { box-shadow: 0 8px 24px rgba(0, 0, 0, .45) !important; }

/* Colored tint chips/panels (bg-*-50 with dark text) */
html.dark .bg-blue-50 { background-color: rgba(37, 99, 235, .15) !important; }
html.dark .bg-emerald-50, html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, .12) !important; }
html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, .12) !important; }
html.dark .bg-violet-50 { background-color: rgba(139, 92, 246, .14) !important; }
html.dark .bg-rose-50 { background-color: rgba(244, 63, 94, .12) !important; }
html.dark .bg-sky-50 { background-color: rgba(14, 165, 233, .12) !important; }
html.dark .bg-slate-200 { background-color: #263450 !important; }
html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, .18) !important; }
html.dark .bg-rose-100 { background-color: rgba(244, 63, 94, .18) !important; }
html.dark .border-amber-300 { border-color: rgba(245, 158, 11, .4) !important; }

/* Premium upsell card: light amber→white gradient becomes a dark amber wash */
html.dark .bg-gradient-to-r.from-amber-50 { background: linear-gradient(to right, rgba(245, 158, 11, .12), #111a2e) !important; }

/* Solid bright buttons keep dark text for contrast (text-midnight is lightened globally) */
html.dark .bg-amber-400.text-midnight, html.dark .bg-amber-300.text-midnight,
html.dark .hover\:bg-amber-300:hover.text-midnight { color: #0A0F1D !important; }
html.dark .border-blue-100, html.dark .border-blue-200 { border-color: rgba(59, 130, 246, .35) !important; }
html.dark .border-emerald-100, html.dark .border-emerald-200 { border-color: rgba(16, 185, 129, .35) !important; }
html.dark .border-amber-100, html.dark .border-amber-200 { border-color: rgba(245, 158, 11, .35) !important; }
html.dark .border-violet-100, html.dark .border-violet-200 { border-color: rgba(139, 92, 246, .35) !important; }
html.dark .border-rose-100, html.dark .border-rose-200 { border-color: rgba(244, 63, 94, .35) !important; }
html.dark .text-blue-700, html.dark .text-blue-800, html.dark .text-blue-900 { color: #93c5fd !important; }
html.dark .text-emerald-700, html.dark .text-emerald-800 { color: #6ee7b7 !important; }
html.dark .text-amber-700, html.dark .text-amber-800 { color: #fcd34d !important; }
html.dark .text-violet-700, html.dark .text-violet-800 { color: #c4b5fd !important; }
html.dark .text-violet-900\/80 { color: rgba(196, 181, 253, .85) !important; }
html.dark .text-blue-900\/80, html.dark .text-blue-900\/70 { color: rgba(147, 197, 253, .85) !important; }
html.dark .text-rose-700 { color: #fda4af !important; }
html.dark .border-sky-100, html.dark .border-sky-200 { border-color: rgba(14, 165, 233, .35) !important; }
html.dark .text-sky-700, html.dark .text-sky-800 { color: #7dd3fc !important; }

/* Form controls */
html.dark input, html.dark select, html.dark textarea {
  background-color: #0d1526 !important;
  color: #E2E8F0 !important;
  border-color: #334155 !important;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b; }
html.dark input[type="file"]::file-selector-button { background-color: rgba(37, 99, 235, .2); color: #93c5fd; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* Las etiquetas del formulario de Agente (#agent-form) heredaban el color del
   body (#0f172a) sin clase propia, y al lado de los títulos extrabold se leían
   grises. En modo claro van al azul noche de la paleta; el modo oscuro ya lo
   resuelve el bloque html.dark de arriba y no se toca. */
html:not(.dark) #agent-form > label { color: var(--midnight); }