/* === Calendario Cambio de Discos — estilos extraídos del <style> === */

/* Tipografía base */
:root{ --font-base: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; }
html{ font-size:15px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
body, input, button, select, textarea,
.btn, .form-control, .form-select, .modal, .table, .badge, .list-group-item, .dropdown-menu { font-family: var(--font-base) !important; font-weight:400 !important; }
h1,h2,h3,h4,h5,h6,.title,.modal-title{ font-weight:500 !important; letter-spacing:.2px }
b,strong{ font-weight:500 !important; }

/* Paleta de marca */
:root{
  --brand-h: 246; --brand-s: 85%;
  --brand-50:  hsl(var(--brand-h) var(--brand-s) 96%);
  --brand-100: hsl(var(--brand-h) var(--brand-s) 92%);
  --brand-500: hsl(var(--brand-h) var(--brand-s) 60%);
  --brand-600: hsl(var(--brand-h) var(--brand-s) 54%);
  --brand-700: hsl(var(--brand-h) var(--brand-s) 48%);
}

/* Marca de agua del día */
:root[data-theme="light"]{ --day-watermark: color-mix(in oklab, var(--text-1) 8%, transparent); }
:root[data-theme="dark"] { --day-watermark: color-mix(in oklab, var(--text-1) 12%, transparent); }

.day{ position:relative; overflow:hidden; }
.day-bg{
  position:absolute; right:.6rem; bottom:.35rem;
  font-weight:800; line-height:1; pointer-events:none; user-select:none;
  font-size:clamp(2.25rem, 6vw + 1rem, 4.5rem);
  color:var(--day-watermark);
  z-index:0;
}
/* Asegura que el contenido quede sobre la marca de agua */
.day > *:not(.day-bg){ position:relative; z-index:1; }

/* Variables de tema */
:root[data-theme="light"]{
  --bg-app:   hsl(220 30% 98%);
  --bg-card:  #fff;
  --border-1: hsl(220 15% 90%);
  --text-1:   hsl(220 30% 12%);
  --muted-1:  hsl(220 12% 46%);
  --row-hover: hsl(220 20% 96%);
  --elev-1: 0 1px 2px rgba(0,0,0,.08);
  --elev-2: 0 12px 24px -14px rgba(0,0,0,.18);
  --field-bg: #fff; --field-bd: var(--border-1); --field-fg: var(--text-1); --field-ph: hsl(220 12% 55%);
  --abs1:hsl(230 100% 97% / .95);
  --abs2:hsl(260 95% 96% / .92);
  --abs3:hsl(200 90% 97% / .90);
  --grain:rgba(0,0,0,.03);
}
:root[data-theme="dark"]{
  --bg-app:   hsl(222 45% 8%);
  --bg-card:  hsl(222 47% 12%);
  --border-1: hsl(222 27% 26%);
  --text-1:   hsl(0 0% 98%);
  --muted-1:  hsl(215 16% 78%);
  --row-hover: hsl(222 30% 18%);
  --elev-1: 0 1px 2px rgba(0,0,0,.55);
  --elev-2: 0 14px 26px -14px rgba(0,0,0,.6);
  --field-bg: hsl(222 22% 16%);
  --field-bd: hsl(222 24% 28%);
  --field-fg: hsl(0 0% 98%);
  --field-ph: hsl(215 12% 72%);
  --abs1:hsl(230 45% 16% / .75);
  --abs2:hsl(260 55% 14% / .68);
  --abs3:hsl(200 50% 18% / .65);
  --grain:rgba(255,255,255,.05);
}
:root[data-theme="dark"] .text-muted { color: #fff !important; }

html,body{height:100%}
body{ background: var(--bg-app); color: var(--text-1); }

/* Fondo animado */
.bg-abs{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 80% at 20% 15%, var(--abs1) 0%, transparent 60%),
    radial-gradient(55% 60% at 85% 35%, var(--abs2) 0%, transparent 62%),
    radial-gradient(70% 70% at 50% 90%, var(--abs3) 0%, transparent 70%),
    conic-gradient(from 20deg at 70% 20%, color-mix(in oklab, var(--abs1) 35%, transparent) 0 180deg, transparent 180deg);
  background-repeat:no-repeat;
  background-size:160% 160%, 180% 180%, 200% 200%, 140% 140%;
  background-position:0% 0%, 100% 0%, 0% 100%, 50% 50%;
  animation:bg-pan 60s ease-in-out infinite alternate;
  filter:saturate(1.06) contrast(1.02);
}
.bg-abs::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(circle at 1px 1px, var(--grain) 1px, transparent 1.2px);
  background-size:4px 4px; mix-blend-mode:overlay;
}
@keyframes bg-pan{
  0%{background-position:0% 0%,100% 0%,0% 100%,50% 50%}
  100%{background-position:100% 100%,0% 100%,100% 0%,50% 50%}
}

/* Layout */
.app-wrap{ max-width: 1400px; margin-inline:auto; padding: clamp(.75rem, 1vw + .5rem, 1.25rem); }

.page-card{ background: var(--bg-card); border:1px solid var(--border-1); border-radius: 1rem; box-shadow: var(--elev-1); padding: .8rem 1rem; margin-bottom: .75rem; }
.title{ font-weight: 800; margin:0; display:flex; align-items:center; gap:.5rem }
.badge.user-badge{
  display:grid; place-items:center; height:34px; padding:0 .7rem; padding-top: 12px;
  line-height:1; border-radius:9999px; box-sizing:border-box; vertical-align:middle;
}
.actions-wrap{ display:flex; gap:.5rem; flex-wrap:wrap }
.actions-wrap .btn{ box-shadow: var(--elev-1) }

.filter-card{ background: var(--bg-card); border:1px solid var(--border-1); border-radius: 1rem; padding:.75rem; box-shadow: var(--elev-1); }

/* Calendario */
.calendar-wrapper{ position:relative; max-height:var(--cal-h,70vh); overflow:auto; -webkit-overflow-scrolling:touch; padding-bottom:.25rem; border-radius:1rem; }
.cal-head,.calendar{ display:grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap:.65rem; min-width:0 }
.cal-head{ position:sticky; top:0; z-index:5; background:var(--bg-card); padding:.6rem .2rem; border-bottom:1px solid var(--border-1); box-shadow:0 6px 12px -10px rgba(0,0,0,.3) }
.cal-head>div{ font-weight:400 !important; }

.day{ border:1px solid var(--border-1); border-radius:.9rem; background: var(--bg-card); padding:.6rem; min-height:180px; display:flex; flex-direction:column; box-shadow: var(--elev-1); }
.day-num{font-weight:800}
.btn-xs{padding:.2rem .5rem;font-size:.75rem;border-radius:9999px}

/* Evento */
.event{ display:flex; align-items:center; gap:.45rem; padding:.4rem .5rem; border:1px solid var(--border-1); border-radius:.75rem; background: color-mix(in oklab, var(--bg-card) 92%, var(--brand-50) 8%); overflow:hidden; transition: box-shadow .2s, transform .12s ease; }
:root[data-theme="dark"] .event{ background: color-mix(in oklab, var(--bg-card) 92%, black 8%); }
.event:hover{ box-shadow: var(--elev-2); transform: translateY(-1px); }

.event-logo{ width:44px; height:20px; object-fit:contain; opacity:.95 }
.event-badge{ font-size:.68rem; white-space:nowrap }
.event-info{ flex:1 1 auto; min-width:0 }
.event-info .text-muted{ color: var(--muted-1)!important }

.event .btn-view{
  width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;border:1px solid var(--border-1);
  background: color-mix(in oklab, var(--bg-card) 92%, var(--brand-500) 8%); color: var(--text-1);
}
.event .btn-view:hover{ background: color-mix(in oklab, var(--brand-500) 18%, transparent); border-color: color-mix(in oklab, var(--brand-600) 40%, transparent) }

/* Responsivo */
@media (max-width:575.98px){
  .cal-head{display:none}
  .calendar{ grid-template-columns: 1fr; gap:.75rem; }
  .day{ min-height:unset; border-radius:1rem; padding:.9rem; box-shadow: var(--elev-2); }
  .event{ padding:.55rem .6rem }
  .event-logo{ width:54px; height:22px }
  .event .btn-view{ width:32px; height:32px }
}
@media (min-width:576px) and (max-width:767.98px){ .cal-head{display:none} .calendar{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:768px) and (max-width:991.98px){ .cal-head{display:none} .calendar{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (min-width:992px) and (max-width:1199.98px){ .cal-head{display:none} .calendar{ grid-template-columns:repeat(5, minmax(0,1fr)); } }

/* Botones */
.btn{
  --btn-bg: color-mix(in oklab, var(--bg-card) 95%, black 5%); --btn-fg: var(--text-1); --btn-bd: var(--border-1);
  border-radius:9999px; border:1px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg);
  padding:.45rem .9rem; display:inline-flex; align-items:center; gap:.45rem; line-height:1.25;
  transition: background .2s, border-color .2s, color .2s, transform .12s ease, box-shadow .2s, filter .2s;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--elev-2); }
.btn-sm{ padding:.35rem .7rem }
.btn-icon{ width:34px;height:34px;padding:0;justify-content:center }
.btn-primary{ background: linear-gradient(180deg, var(--brand-500), var(--brand-600)); border-color: var(--brand-700); color:#fff; }
.btn-outline-primary{ background: color-mix(in oklab, var(--brand-500) 12%, transparent); border-color: color-mix(in oklab, var(--brand-600) 40%, transparent) }
.btn-outline-secondary{ background: color-mix(in oklab, var(--text-1) 6%, transparent); border-color: var(--border-1) }
.btn-outline-danger{ background: color-mix(in oklab, #ef4444 10%, transparent); color:#ef4444; border-color: color-mix(in oklab, #ef4444) }
.bi{ display:inline-block; line-height:1; vertical-align:middle }
.btn .bi,.btn-icon .bi{ transform: translateY(-1px); }

/* Modal */
.modal-content{ background: var(--bg-card); color: var(--text-1); border: 1px solid var(--border-1); box-shadow: var(--elev-2); }
.modal-header,.modal-footer{ background: color-mix(in oklab, var(--bg-card) 92%, black 8%); border-color: var(--border-1); }
.modal-title{ color: var(--text-1); font-weight: 800; }
.modal .text-muted,.modal .form-text{ color: var(--muted-1) !important; }
.modal .form-label{ color: var(--text-1); }
.modal .form-control,.modal .form-select{ background-color: var(--field-bg); border-color: var(--field-bd); color: var(--field-fg); }
.modal .form-control::placeholder{ color: var(--field-ph); }
.modal .form-control:focus,.modal .form-select:focus{
  background-color: var(--field-bg); color: var(--field-fg);
  border-color: color-mix(in oklab, var(--brand-500) 60%, var(--field-bd) 40%);
  box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--brand-500) 35%, transparent);
}
:root[data-theme="dark"] .btn-close{ filter: invert(1) grayscale(100%) contrast(140%); opacity: .9; }

/* Menú usuario */
.dropdown-menu.user-menu{ background: var(--bg-card); color: var(--text-1); border: 1px solid var(--border-1); box-shadow: var(--elev-2); }
.dropdown-menu.user-menu .list-group-item{ background: transparent; color: var(--text-1); border-color: var(--border-1); }
.dropdown-menu.user-menu .list-group-item:hover{ background: color-mix(in oklab, var(--bg-card) 88%, black 12%); }
.dropdown-menu.user-menu .text-muted,.dropdown-menu.user-menu .form-text{ color: var(--muted-1) !important; }

/* Estructura general */
.layout{ min-height:100vh; display:flex; flex-direction:column; }
.topbar{ position:sticky; top:0; z-index:1030; background: var(--bg-app); }
.scrollbody{ flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; }

/* Botón ver en resultados de búsqueda */
.btn-view-search{
  width:28px; height:28px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9999px; border:1px solid var(--border-1);
  background: color-mix(in oklab, var(--bg-card) 92%, var(--brand-500) 8%);
  color: var(--text-1);
  transition: background .2s, border-color .2s;
}
.btn-view-search:hover{
  background: color-mix(in oklab, var(--brand-500) 18%, transparent);
  border-color: color-mix(in oklab, var(--brand-600) 40%, transparent);
}

/* Modal de búsqueda: ancho */
@media (min-width: 576px){ #modalSearch .modal-dialog{ max-width:600px; width:100%; } }

/* ====== USUARIOS: tabla, modal y detalles específicos ====== */

/* Contenedor principal de esta vista */
.page-wrap { max-width:1200px; margin-inline:auto; padding:clamp(.75rem, 1vw + .5rem, 1.25rem); }
.page-header { gap:.5rem; align-items:center; }

/* Tarjeta que envuelve la tabla */
.table-card{
  background:var(--bg-card); border:1px solid var(--border-1);
  border-radius:1rem; box-shadow:var(--elev-1); overflow:hidden;
}
.table-responsive{-webkit-overflow-scrolling:touch}

/* Tabla y encabezado fijo */
.table{ margin:0; white-space:nowrap; color:var(--text-1); font-size:.9rem; }
.table thead th{
  position:sticky; top:0;
  background:color-mix(in oklab, var(--bg-card) 85%, var(--brand-50) 15%);
  border-bottom:1px solid var(--border-1);
  text-align:center; color:var(--text-1);
  padding:.4rem .5rem;
}
.table tbody td{ text-align:center; vertical-align:middle; color:var(--text-1); padding:.35rem .5rem; }
.table tbody tr:hover{ background:var(--row-hover); }

/* Botón-ícono un poco más compacto sólo dentro de tablas (no afecta al calendario) */
.table .btn-icon { width:32px; height:32px; }

/* “Muted” coherente con tokens */
.text-muted{ color:var(--muted-1)!important; }

/* Ajustes de tabla en modo oscuro (coherencia Bootstrap) */
:root[data-theme="dark"] .table{
  --bs-table-color:var(--text-1);
  --bs-table-bg:var(--bg-card);
  --bs-table-border-color:var(--border-1);
  --bs-table-striped-bg:hsl(222 30% 16%);
  --bs-table-hover-bg:var(--row-hover);
  --bs-table-active-bg:var(--row-hover);
}
:root[data-theme="dark"] .table > :not(caption) > * > *{
  color:var(--bs-table-color)!important;
  background-color:var(--bs-table-bg)!important;
  border-color:var(--bs-table-border-color)!important;
}

/* Menú de usuario: el archivo ya define .dropdown-menu.user-menu;
   aquí sólo reforzamos el borde redondeado para esta vista */
.dropdown-menu.user-menu{ border-radius:12px; }

/* Botones “outline” usados en esta página */
.btn-outline-success{
  background: color-mix(in oklab, #16a34a 12%, transparent);
  color:#16a34a;
  border-color: color-mix(in oklab, #16a34a 40%, transparent);
}

/* Toggle de tema inline con “pulso” */
#themeToggle.theme-toggle-inline{ position:relative; overflow:hidden; box-shadow:var(--elev-1); }
#themeToggle.theme-toggle-inline:hover{ box-shadow:var(--elev-2); }
#themeToggle.theme-toggle-inline .bi{ font-size:1.1rem; transition:transform .35s ease, opacity .2s; }
#themeToggle.theme-toggle-inline:hover .bi{ transform:rotate(18deg) scale(1.06); }
#themeToggle.theme-toggle-inline:active .bi{ transform:rotate(220deg) scale(.92); }
#themeToggle.theme-toggle-inline .pulse{
  position:absolute; inset:0; border-radius:9999px; pointer-events:none;
  box-shadow:0 0 0 0 color-mix(in oklab, var(--brand-500) 45%, transparent); opacity:.9;
}
#themeToggle.theme-toggle-inline.clicked .pulse{ animation:ring .6s ease; }
@keyframes ring{
  0%{ box-shadow:0 0 0 0 color-mix(in oklab, var(--brand-500) 45%, transparent) }
  100%{ box-shadow:0 0 0 16px transparent }
}

/* Caja de empresas en el modal */
.box-empresas{
  border:1px solid var(--border-1);
  border-radius:.75rem;
  background: color-mix(in oklab, var(--bg-card) 94%, var(--brand-50) 6%);
  padding:.5rem;
  max-height: 240px;
  overflow:auto;
}
:root[data-theme="dark"] .box-empresas{
  background: color-mix(in oklab, var(--bg-card) 92%, black 8%);
}

/* ====== CLIENTES: tarjetas responsivas, logo y toggle de tema ====== */

/* Tabla vs. tarjetas (móviles) */
.cards-responsive { display:none; }
.table-wrap-desktop{ display:block; }
@media (max-width:575.98px){
  .table-wrap-desktop{ display:none; }
  .cards-responsive{ display:flex; }
}

/* Tarjeta usada en móviles */
.cardv{
  border:1px solid var(--border-1);
  background:var(--bg-card);
  border-radius:1rem;
  padding:.9rem;
  box-shadow:var(--elev-1);
  backdrop-filter: blur(6px);
  transition: box-shadow .15s ease, transform .15s ease;
}
.cardv:hover{ box-shadow:var(--elev-2); transform:translateY(-1px); }
.cardv .head{ display:flex; align-items:center; gap:.6rem; justify-content:space-between }
.cardv .muted{ color:var(--muted-1) }

/* Imagen del logo en tabla/tarjeta */
.logo-50{
  width:50px; height:50px; object-fit:contain;
  background:#fff; border:1px solid #e5e7eb; border-radius:.5rem;
}

/* Toggle de tema (esta vista usa .theme-toggle en lugar de .theme-toggle-inline) */
#themeToggle.theme-toggle{ position:relative; overflow:hidden; box-shadow:var(--elev-1); }
#themeToggle.theme-toggle:hover{ box-shadow:var(--elev-2); }
#themeToggle.theme-toggle .bi{ font-size:1.1rem; transition:transform .35s ease, opacity .2s; }
#themeToggle.theme-toggle:hover .bi{ transform:rotate(18deg) scale(1.06); }
#themeToggle.theme-toggle:active .bi{ transform:rotate(220deg) scale(.92); }
#themeToggle.theme-toggle .pulse{
  position:absolute; inset:0; border-radius:9999px; pointer-events:none;
  box-shadow:0 0 0 0 color-mix(in oklab, var(--brand-500) 45%, transparent); opacity:.9;
}
#themeToggle.theme-toggle.clicked .pulse{ animation:ring .6s ease; }

/* Asegura el menú por encima de tarjetas */
.page-card{ position:relative; z-index:30; }
.dropdown-menu.user-menu{ z-index: 2000 !important; }

/* ====== LOGIN: tarjeta, campos, toggle y responsive ====== */

/* Contenedor general: centra vertical/horizontal sin tocar <body> global */
.login-wrap{
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 40px);
}

/* Tarjeta de login */
.login-card{
  width:100%;
  max-width:460px;
  background: var(--bg-card);
  border:1px solid var(--border-1);
  border-radius:1.25rem;
  box-shadow: var(--elev-1);
  overflow:hidden;
  backdrop-filter: blur(8px);
}
.login-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.95rem 1.1rem .75rem;
  border-bottom:1px solid var(--border-1);
}
.login-title{ margin:0; display:flex; align-items:center; gap:.5rem; }
.login-body{ padding:1.1rem; }
.login-footer{ padding:.75rem 1.1rem 1.1rem; }

/* Campos dentro de la tarjeta */
.login-card .form-control{
  background-color: var(--field-bg);
  border-color: var(--field-bd);
  color: var(--field-fg);
}
.login-card .form-control::placeholder{ color: var(--field-ph); opacity:.9; }
.login-card .form-control:focus{
  background-color: var(--field-bg);
  color: var(--field-fg);
  border-color: color-mix(in oklab, var(--brand-500) 60%, var(--field-bd) 40%);
  box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--brand-500) 35%, transparent);
}
.login-card .input-group-text{
  background-color: var(--field-bg);
  border-color: var(--field-bd);
  color: var(--field-fg);
}

/* Botón principal, sólo en la tarjeta (no afecta otras páginas) */
.login-card .btn-primary{
  border-radius:.9rem;
  padding:.6rem 1rem;
}

/* Botón flotante de tema (FAB) y animación de “pulso” */
.theme-fab{
  position:fixed; top:.75rem; right:.75rem; z-index:5;
}
#themeToggle.theme-toggle{ position:relative; overflow:hidden; width:42px; height:42px; border-radius:9999px; border:1px solid var(--border-1);
  background: color-mix(in oklab, var(--bg-card) 92%, var(--brand-500) 8%); box-shadow:var(--elev-1); }
#themeToggle.theme-toggle .bi{ transition:transform .35s ease, opacity .2s; }
#themeToggle.theme-toggle:hover .bi{ transform:rotate(18deg) scale(1.06); }
#themeToggle.theme-toggle:active .bi{ transform:rotate(220deg) scale(.92); }
#themeToggle.theme-toggle .pulse{
  position:absolute; inset:0; border-radius:9999px; pointer-events:none;
  box-shadow:0 0 0 0 color-mix(in oklab, var(--brand-500) 45%, transparent); opacity:.9;
}
#themeToggle.theme-toggle.clicked .pulse{ animation:ring .6s ease; }

/* Si aún no existe la animación “ring”, la declaramos (no pasa nada si ya estaba) */
@keyframes ring{
  0%{ box-shadow:0 0 0 0 color-mix(in oklab, var(--brand-500) 45%, transparent) }
  100%{ box-shadow:0 0 0 16px transparent }
}

/* Ajuste responsive del radio en móviles chicos */
@media (max-width:420px){ .login-card{ border-radius:1rem } }