/* ========= Variables (ajustables) ========= */
:root{
  --modal-bg: #ffffff;
  --modal-text: #111;
  --overlay-bg: rgba(0,0,0,.45);
  --card-bg: #fff;
  --card-bg-hover:#f3f6f9;
  --muted:#666;
  --muted-2:#444;
  --primary:#0d6efd;     /* azul accesible */
  --success:#198754;     /* verde accesible */
  --pill-bg:#eef2f7;
  --pill-text:#1f2a36;
  --warning:#ffc107;
  --warning-text:#3a2f00;
  --shadow: 0 12px 40px rgba(0,0,0,.25);
}

/* ========= Campana + badge ========= */
.noti-icon {
  position: relative;
  cursor: pointer;
  user-select: none;
  line-height: 1;
  font-size: 1.4rem;
}
#badge-noti{
  position:absolute; top:-6px; right:-6px;
  background:#e03131; color:#fff;
  border-radius:999px; padding:2px 6px;
  font-size:12px; font-weight:700; display:none; z-index:10;
}
#badge-noti.nueva{ animation:pulse 1s infinite; }
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}

/* ========= Modal centrado ========= */
/* Importante: el overlay SIEMPRE es flex; se oculta con opacidad/pointer-events */
.modal-overlay{
  position:fixed; inset:0;
  display:flex; justify-content:center; align-items:center;
  background:var(--overlay-bg);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
  z-index:1055;
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }

/* Caja del modal */
.modal-box{
  background:var(--modal-bg); color:var(--modal-text);
  width:min(680px, calc(100% - 32px));
  max-height:80vh; overflow:auto;
  border-radius:14px; box-shadow:var(--shadow);
  padding:22px 24px; position:relative;
  animation:slideIn .22s ease;
}
@keyframes slideIn{from{opacity:0; transform:translateY(8px) scale(.98)} to{opacity:1; transform:none}}

/* Botón cerrar */
.close-btn{
  position:absolute; top:12px; right:14px;
  font-size:22px; cursor:pointer; color:var(--muted);
}
.close-btn:hover{ color:#000; }

/* Título */
#titulo-modal{
  margin:0 0 12px 0; font-size:1.15rem; font-weight:800;
}

/* ========= Tarjetas ========= */
.noti-item{
  background:var(--card-bg);
  border-left:6px solid var(--primary);
  padding:12px 14px; margin-bottom:12px;
  border-radius:10px; transition:background .12s ease;
}
.noti-item:hover{ background:var(--card-bg-hover); }

/* Encabezado */
.noti-head{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:6px;
}
.noti-type{ font-weight:800; color:var(--muted-2); }
.noti-date{ margin-left:auto; color:var(--muted); font-size:.92rem; }

/* Cuerpo y subtítulo */
.noti-body{ white-space:pre-wrap; word-break:break-word; font-size:1rem; line-height:1.35; }
.noti-rich-text{ white-space:normal; overflow-wrap:anywhere; }
.noti-rich-text p{ margin:0 0 .65rem; }
.noti-rich-text p:last-child{ margin-bottom:0; }
.noti-rich-text .noti-message-title{
  font-size:1.05rem; font-weight:800; line-height:1.3;
  margin-bottom:.8rem; padding-bottom:.45rem; border-bottom:1px solid rgba(127,127,127,.25);
}
.noti-rich-text ul{ margin:.3rem 0 .65rem; padding-left:1.25rem; }
.noti-rich-text li+li{ margin-top:.2rem; }
.noti-rich-text strong + p{ display:inline; }
.noti-sub{ color:#555; margin-top:4px; }

/* Pie */
.noti-foot{ margin-top:8px; color:#222; }

/* Píldoras */
.pill-count{
  background:var(--pill-bg); color:var(--pill-text);
  border-radius:999px; font-size:12px; padding:2px 8px; font-weight:700;
}
.pill-new{
  background:var(--warning); color:var(--warning-text);
  border-radius:999px; font-size:12px; padding:2px 8px; font-weight:700;
}

/* Variantes */
.tipo-global{ border-left-color:var(--primary); }
.tipo-respuesta{ border-left-color:var(--success); }

/* Inputs dentro del modal (si los usás) */
.modal-box textarea{
  margin-top:8px; width:100%; min-height:90px;
  padding:10px 12px; resize:vertical; font:inherit;
  border:1px solid #c9d1d9; border-radius:8px;
}
.modal-box .btn, .modal-box button{
  margin-top:10px; padding:8px 14px; border:0; border-radius:8px;
  background:var(--primary); color:#fff; font-weight:700; cursor:pointer;
}
.modal-box .btn:hover, .modal-box button:hover{ filter:brightness(.92); }

/* Subtítulos de sección */
.noti-section{ font-size:1rem; font-weight:800; margin:8px 0; color:#1b2430; }
.noti-history-toolbar{display:flex;justify-content:flex-end;position:sticky;top:-22px;z-index:3;padding:8px 0;background:var(--modal-bg)!important}
.noti-history-toolbar .btn{margin:0!important;background:#fff!important;color:#334155!important;border:1px solid #94a3b8!important}
.noti-hidden-label{font-size:12px;font-weight:700;color:#64748b;background:#e2e8f0;border-radius:999px;padding:2px 8px}

/* Accesibilidad: menos movimiento */
@media (prefers-reduced-motion:reduce){
  #badge-noti.nueva{ animation:none; }
  .modal-box{ animation:none; }
}

/* Dark mode */
@media (prefers-color-scheme:dark){
  :root{
    --modal-bg:#121416; --modal-text:#e9eef4;
    --card-bg:#161a1d; --card-bg-hover:#1b2024;
    --muted:#a7b2bd; --muted-2:#d1d7de;
    --pill-bg:#25303a; --pill-text:#e9eef4;
    --shadow: 0 12px 40px rgba(0,0,0,.6);
  }
  .close-btn:hover{ color:#fff; }
}

/* ==== Fix contraste de tarjetas en el modal ==== */

/* Fuerza estilos de las tarjetas renderizadas por JS */
#modal-notificaciones #contenido-modal .noti-item{
  background: #fff;
  color: #111;                  /* texto oscuro sobre tarjeta clara */
  border-left-width: 6px;
}
#modal-notificaciones .modal-box{ max-width:680px; width:min(680px, calc(100% - 24px)); }
#modal-notificaciones #contenido-modal .noti-body{ line-height:1.5; }
#modal-notificaciones #contenido-modal .noti-head .noti-date{ color:#666; }
#modal-notificaciones #contenido-modal .noti-sub{ color:#555; }

/* Si te quedan reglas viejas que aplican al mismo contenedor, neutralizalas */
#modal-notificaciones #contenido-modal > div{
  background: transparent;      /* deja que .noti-item maneje el fondo */
  border-left: 0;
}

/* Dark mode: tarjeta oscura + texto claro */
@media (prefers-color-scheme: dark){
  #modal-notificaciones #contenido-modal .noti-item{
    background:#161a1d !important;
    color:#e9eef4 !important;
  }
  #modal-notificaciones #contenido-modal .noti-head .noti-date{ color:#a7b2bd !important; }
}

#notificaciones-admin { overflow: visible; }

/* Contenedor de la campana: no lo estires */
#notificaciones-admin.noti-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-size: 20px;      /* tamaño del emoji; ajustá 18–24 */
  flex: 0 0 auto !important;
}

/* Wrapper exacto de la campana: sirve de ancla al badge */
.noti-glyph{
  position: relative; 
  display: inline-block;
  width: 24px;          /* caja exacta del icono */
  height: 24px;
  line-height: 24px;
  vertical-align: middle;
}

/* Badge anclado al borde superior-derecho del wrapper */
.noti-glyph #badge-noti.noti-badge{
  position: absolute;
  top: -4px;            /* ⇦ finos ajustes: probá -6 / -3 */
  right: -4px;          /* ⇦ finos ajustes: probá -6 / -2 */
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e03131;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  display: none;        /* lo maneja JS */
  z-index: 2;
}

/* opcional: si querés centrar el texto del badge perfecto */
.noti-glyph #badge-noti{
  display: none;                     /* por defecto */
}
.noti-glyph #badge-noti.nueva{
  display: inline-flex;              /* cuando JS lo muestra */
  align-items: center;
  justify-content: center;
}

/* Tamaño y centrado perfecto del badge */
:root{
  --badge-size: 18px;   /* cambiá 16–22px a gusto */
  --badge-font: 11px;   /* font del número */
}

.noti-glyph #badge-noti{
  position: absolute;
  top: -6px;              /* fino ajuste vertical */
  right: -6px;            /* fino ajuste horizontal */
  width: var(--badge-size);
  height: var(--badge-size);
  border-radius: 50%;
  background: #e03131;
  color: #fff;
  font-weight: 700;
  font-size: var(--badge-font);

  display: none;          /* por defecto; lo enciende JS */
  /* 👇 centra el número exacto */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  line-height: 1;         /* evita que “empuje” hacia abajo */
  padding: 0;             /* importante: sin padding */
  box-sizing: border-box; /* por si le agregás borde */
  z-index: 2;
}

/* cuando hay nuevas, tu JS ya agrega .nueva; si preferís, usá una clase .show */
.noti-glyph #badge-noti.nueva { display: inline-flex; }

/* (Opcional) si hay 2+ dígitos, que no se deforme */
.noti-glyph #badge-noti[data-count^="1"][data-count$="0"],
.noti-glyph #badge-noti[data-count*=" "] /* nunca se cumple; ejemplo de selector */{
  font-size: 10px;       /* leve reducción si llega a 2+ dígitos */
}

.chips-wrap { display:flex; flex-wrap:wrap; gap:.5rem; }
.chip-fraccion { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .6rem; border:1px solid #ddd; border-radius:999px; cursor:pointer; user-select:none; }
.chip-fraccion input { display:none; }
.chip-fraccion input:checked + span { font-weight:600; }
/* Resalto del chip seleccionado */
.chip-fraccion {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .6rem;
  border: 1px solid #ced4da;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.chip-fraccion input[type="checkbox"] { display: none; } /* oculto el checkbox, usamos el chip */
.chip-fraccion.checked {
  background-color: #0d6efd1a;   /* sutil celestito */
  border-color: #0d6efd;
  color: #0d6efd;
  font-weight: 600;
}

/* Chips de fracciones (comparten con form-check para no romper nada) */
.chip-fraccion {
  --chip-pad: .35rem .6rem;
  --chip-radius: .5rem;
  border: 1px solid #ced4da;
  border-radius: var(--chip-radius);
  padding: var(--chip-pad);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* ocultás el “tick” si querés y dejás solo el color del chip */
.chip-fraccion .form-check-input {
  inline-size: 0;
  block-size: 0;
  margin: 0;
  opacity: 0;
}

/* Estado seleccionado */
.chip-fraccion.is-checked {
  background-color: var(--bs-primary);
  color: #fff;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .15rem rgba(13,110,253,.2);
}

/* Hover para accesibilidad */
.chip-fraccion:not(.is-checked):hover {
  background-color: #f1f3f5;
}