@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=optional');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #A6ABB5; font-family: 'Quicksand', system-ui, sans-serif; color: #2D333D; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.85; }
input::placeholder, textarea::placeholder { color: #9AA0A8; }
input, textarea, button { font-family: 'Quicksand', sans-serif; }
button { cursor: pointer; }

/* Layout: los diseños desktop y mobile son intencionalmente distintos (sidebar vs. nav inferior),
   así que en vez de un único layout fluido, se togglean por media query — cada uno ya está
   armado a medida para su rango de pantalla. */
/* Escritorio: se ve el diseño desktop; móvil: el diseño mobile. Las reglas NO fuerzan "display" en el móvil
   (antes lo hacían y se perdía el espaciado de cada pantalla), así cada contenedor conserva su propio layout. */
@media (min-width: 901px) { .only-mobile { display: none !important; } }
@media (max-width: 900px) { .only-desktop { display: none !important; } }


/* Animación de entrada al cambiar de pantalla: el contenido aparece escalonado (fundido + leve subida).
   El menú lateral y el encabezado (nombre) quedan quietos. Se apaga si el sistema pide "reducir movimiento". */
@keyframes cobroEntrada {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
#sidebar-d + div > :not(:first-child),
#nav-m ~ * {
  animation: cobroEntrada 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
#sidebar-d + div > :nth-child(2), #nav-m ~ :nth-child(4) { animation-delay: 0.00s; }
#sidebar-d + div > :nth-child(3), #nav-m ~ :nth-child(5) { animation-delay: 0.06s; }
#sidebar-d + div > :nth-child(4), #nav-m ~ :nth-child(6) { animation-delay: 0.12s; }
#sidebar-d + div > :nth-child(5), #nav-m ~ :nth-child(7) { animation-delay: 0.18s; }
#sidebar-d + div > :nth-child(6), #nav-m ~ :nth-child(8) { animation-delay: 0.24s; }
#sidebar-d + div > :nth-child(n+7), #nav-m ~ :nth-child(n+9) { animation-delay: 0.30s; }

/* Ítems del menú: pequeño desplazamiento al pasar el mouse */
#sidebar-d a { transition: transform 0.2s ease, background-color 0.2s ease; }
#sidebar-d a:hover { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  #sidebar-d + div > *, #nav-m ~ * { animation: none !important; }
  #sidebar-d a { transition: none; }
}

/* Móvil: la barra de navegación va fija abajo, como en una app. */
#nav-m { position: fixed; left: 12px; right: 12px; bottom: 10px; z-index: 50; }
.only-mobile:has(#nav-m) { padding-bottom: 110px !important; }

/* Filas con scroll horizontal (filtros, pestañas): sin barra de desplazamiento visible */
[style*="overflow-x: auto"] { scrollbar-width: none; }
[style*="overflow-x: auto"]::-webkit-scrollbar { display: none; }

/* Campos de formulario: nunca más anchos que su contenedor (evita que se salgan de la pantalla en el celular) */
input, select, textarea { min-width: 0; max-width: 100%; }

/* Menú lateral (escritorio): ocupa el alto de la pantalla y queda fijo mientras se baja por el contenido. */
#sidebar-d { position: sticky; top: 40px; align-self: start; }
#sidebar-d > div { scrollbar-width: none; }
#sidebar-d > div::-webkit-scrollbar { display: none; }

/* Botón de acción principal (color de acento) */
.btn-acento { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 999px; background: #FFB673; color: #2D333D; font-size: 14px; font-weight: 700; box-shadow: 0 6px 16px rgba(255, 182, 115, 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.btn-acento:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(255, 182, 115, 0.45); }

/* Selector de evento: una sola flecha (la propia), sin la flecha nativa del navegador */
.evt-select { appearance: none; -webkit-appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A4F57' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center; padding: 0 20px 0 0; text-overflow: ellipsis; }

/* Lo que depende de tener un evento se oculta mientras no haya ninguno */
body.sin-eventos .solo-con-evento { display: none !important; }

/* ── Avisos y confirmaciones propios (reemplazan los carteles del navegador) ── */
@keyframes cbFondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes cbEntra { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes cbToast { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.cb-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(45, 51, 61, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: cbFondo 0.18s ease both; }
.cb-modal { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 30px 28px 24px; border-radius: 28px; background: #F4F5F7; text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); animation: cbEntra 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.cb-ico { width: 56px; height: 56px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.cb-titulo { font-size: 18px; font-weight: 700; color: #2D333D; line-height: 1.25; }
.cb-texto { font-size: 13.5px; color: #4A4F57; line-height: 1.55; word-break: break-word; }
.cb-acciones { width: 100%; display: flex; gap: 10px; margin-top: 8px; }
.cb-btn { flex: 1; padding: 14px 18px; border-radius: 999px; border: none; font-size: 14px; font-weight: 700; cursor: pointer; transition: transform 0.12s ease, opacity 0.12s ease; }
.cb-btn:hover { transform: translateY(-1px); }
.cb-btn:focus-visible { outline: 3px solid #FFB673; outline-offset: 2px; }
.cb-btn-main { background: #2D333D; color: #FFFFFF; }
.cb-btn-peligro { background: #E2725B; color: #FFFFFF; }
.cb-btn-sec { background: #E7E9EC; color: #2D333D; }
.cb-toast { position: fixed; left: 50%; bottom: 28px; z-index: 1000; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px; background: #2D333D; color: #FFFFFF; font-size: 13.5px; font-weight: 600; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3); animation: cbToast 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@media (max-width: 900px) { .cb-toast { bottom: 104px; } }
@media (max-width: 480px) { .cb-modal { padding: 26px 20px 20px; } .cb-acciones { flex-direction: column-reverse; } }
@media (prefers-reduced-motion: reduce) { .cb-overlay, .cb-modal, .cb-toast { animation: none; } }