/* Modal editor objetivos agentes */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  display: none; align-items: center; justify-content: center; z-index: 999;
}
.modal-card {
  background: #fff; width: min(900px, 95vw); max-height: 85vh; overflow: auto;
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2); padding: 16px;
}
.modal-card header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.modal-card header h3 { margin:0; font-size: 16px; }
.modal-card .grid { display: grid; grid-template-columns: 1fr 130px; gap: 6px 10px; }
.modal-card .grid .agent-label { padding:6px 8px; background:#f8fafc; border-radius: 6px; }
.modal-card footer { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }
.modal-card input[type="number"] { width: 100%; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.JCLRgrip {
  position: absolute;
  top: 0;
  height: 100%;
  width: 8px;       /* ancho de la zona clicable para redimensionar */
  cursor: col-resize;
  z-index: 5;
}
.JCLRgrip .JColResizer {
  position: absolute;
  top: 0; bottom: 0; left: 3px; right: 3px;
  background: transparent; /* cambia a rgba(0,0,0,.08) si quieres ver la línea */
}
.JCLRgrip.dragging .JColResizer {
  background: rgba(0,0,0,.15);
}

    :root {
      --primary: #0ea5e9;
      --secondary: #398b08f7;
      --bg: #e8e8e8;
      --card: #f9fafb;
      --text: #1f2937;
      --error: #ef4444;
      --radius: 10px;
      --sidebar-width: 210px;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--text);
      height: 100vh;
      overflow: hidden;
      align-content: center;
    }
    .container {
      width: 360px;
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: 0 10px 24px rgba(0,0,0,0.08);
      overflow: hidden;
      position: relative;
      margin: auto;
    }
    header, main { padding: 24px; }
    header { background: var(--secondary); color: #fff; text-align: center; }
    footer { background: var(--secondary); color: #fff; text-align: center; height: 50px; align-content: center; padding: 8px;}
    header h1 { font-weight: 600; font-size: 1.25rem; }
    main { padding-top: 16px; }
    label { display: block;  font-weight: 500; }
    label input, label select {
      width: 100%;
      padding: 12px;
      border: 1px solid #d1d5db;
      border-radius: var(--radius);
      margin-top: 4px;
    }
    label.checkbox {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 14px;
      flex-direction: column;
    }
    label.checkbox input { margin-right: 8px; transform: scale(1.1); }
    button.primary {
      background: var(--secondary);
      color: #fff;
      border: none;
      border-radius: var(--radius);
      padding: 6px 6px;
      font-weight: 600;
      cursor: pointer;
      transition: background .2s;
    }
    button.primary:hover { background: #0c7abf; }
    .error { color: var(--error); margin-top: 12px; text-align: center; }
 
    /* --- Nueva disposición: sidebar + main --- */
    #menu-screen { display: none; height: 100%; }
    #menu-container {
      display: flex;
      height: 100%;
    }
    #sidebar {
      width: var(--sidebar-width);
      background: var(--card);
      border-right: 0px solid #5c5c5cf7;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 5px 5px;
      overflow: auto;
      box-shadow: 5px 8px 4px rgb(0 0 0 / 10%);
    }
    #sidebar img {
      max-width: 100px;
      margin-bottom: 16px;
    }
    #sidebar h2 {
      font-size: 1.1rem;
      margin-bottom: 24px;
      text-align: center;
      color: var(--secondary);
    }
    /* Sidebar colapsable */
#sidebar { transition: width .25s ease, padding .25s ease; }
#menu-container.sidebar-collapsed #sidebar {
  width: 56px; padding: 12px 6px;
}
#menu-container.sidebar-collapsed #sidebar h2,
#menu-container.sidebar-collapsed #sidebar img { display: none; }

/* Lista de botones en columna y con hueco */
#nav-buttons { display:flex; flex-direction:column; gap:5px; flex:1;width: 95%; }

/* --- Botones de navegación con iconos --- */
#nav-buttons .nav-btn {
  display: flex;
    align-items: center;
    gap:11px;
    padding: 1px 3px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    font-size: 12px;
}

#nav-buttons .nav-btn .nav-icon {
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 'FILL' 1;
  font-size: 20px;
  line-height: 1;
}

/* En sidebar expandido, se ve icono + texto */
#nav-buttons .nav-btn .nav-label { display: inline; }

#nav-buttons .nav-group-title .nav-label { display: inline; }

/* --- Colapsado: ocultar texto y centrar icono --- */
#menu-container.sidebar-collapsed #nav-buttons .nav-btn {
  justify-content: center;
  font-size: 10px;      
  padding: 8px;        
}

#menu-container.sidebar-collapsed #nav-buttons .nav-group-label {
  justify-content: center;
  font-size: 10px;      
  padding: 8px;  
  display:none;      
}



#menu-container.sidebar-collapsed #nav-buttons .nav-btn .nav-label {
  display: none;        /* solo icono */
}

/* Logout en rojo (con icono) */
#nav-buttons .logout-btn { 
 
  border: none;
}
 .install-pwa-btn { 
 margin-top:auto;
  border: none;
}



/* Botón “hamburguesa” del header */
#main-header { display:flex; align-items:center; gap:8px; justify-content:flex-start; }  /* lo tienes centrado, lo pasamos a flex */
#sidebar-toggle {
  background: transparent; color:black; border:0; cursor:pointer;
  font-size:20px; line-height:1; padding:6px 10px; border-radius:8px;
}
#sidebar-toggle:hover { background: rgba(255,255,255,.12); }
    
/* Hover / focus de los botones del sidebar */
#nav-buttons .nav-btn {
  transition: background .2s, box-shadow .2s, transform .08s;
}

/* Estado hover (expandido y colapsado) */
#nav-buttons .nav-btn:hover {
  background: #08688b;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transform: translateY(-1px);
  color:white;
  filter: brightness(1);
}
#nav-buttons .logout-btn:hover { 
  filter: brightness(1);
 }

/* Estado active (click) para mejor feedback */
#nav-buttons .nav-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

/* Accesibilidad: focus visible con anillo */
#nav-buttons .nav-btn:focus-visible {
  outline: 2px solid #0ea5e9;       /* mismo tono que --primary */
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(14,165,233,.2);
}

/* Logout mantiene su brillo al pasar el ratón */
#nav-buttons .logout-btn:hover {
  filter: brightness(1);
  background: rgb(254, 0, 30);  
}    

    #nav-buttons button {
      width: 100%;
      cursor: pointer;
    }
    #main-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    #main-header {
      background: var(--secondary);
      color: #fff;
      text-align: center;
      margin-left:5px;
      margin-top:2px;
      margin-right:5px;
      box-shadow: 5px 6px 4px rgb(0 0 0 / 10%);
    }
    #main-header h1 {
      font-size: 1rem;
      font-weight: 600;
      margin-right:15px;
    }
    #content-area {
      flex: 1;
      overflow: auto;
      padding: 15px;
    }
    table { width: 100%; border-collapse: collapse; margin-top: 10px; }
    th, td { padding: 7px; border: 1px solid #e5e7eb; text-align: center; border: ridge;}
    th { background:#3e8e0f6b; font-weight: 600; }
    .users-table { width: 100%; margin-top: 24px; border-collapse: collapse; }
    .users-table th, .users-table td { padding: 12px; border: 1px solid #e5e7eb; }
    .users-table th { background: #3e8e0f6b; }
    .agenda-list { list-style: none; padding: 0; margin-top: 16px; }
.agenda-container {
  display: flex;
  gap: 24px;
  align-items: flex-start;
height: -webkit-fill-available;
}


.agenda-container .app-form,
.agenda-container .agenda-list-wrapper {
  flex: 1;
    flex: 1;
    height: -webkit-fill-available;
    background: white;
    padding: 10px;
    border-radius: var(--radius);
}


.agenda-container .agenda-list-wrapper {
  /*max-height: calc(100vh - 200px);
  overflow: auto;
}

    .agenda-list li {
      background: var(--bg);
      padding: 12px;
      margin-bottom: 8px;
      border-radius: var(--radius);
      display: flex;
      justify-content: space-between;
      align-items: center;


/* --- Estilos para la tabla de Gestión de Solicitudes --- */
.app-table {
  width: 100%;
  table-layout: auto; 
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-top: 16px;
  background: #fff;
}
.app-table thead {
  background: var(--primary);
}
.app-table thead th {
  color: #fff;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
}
.app-table tbody tr:hover td {
  background: #f9fafb;
}
.app-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
  font-size: 0.95rem;
}
.app-table tbody tr:last-child td {
  border-bottom: none;
}

/* Botones de acción dentro de la tabla */
.action-btn {
  border: none;
  border-radius: var(--radius);
  padding: 6px 12px;
  margin-left: 4px;
  font-size: 0.85rem;
  cursor: pointer;
  color: #fff;
}
.action-btn.approve { background: #16a34a; }   /* verde */
.action-btn.reject  { background: #dc2626; }   /* rojo  */
.action-btn.edit    { background: #2563eb; }   /* azul */
}
/* Hover completo de fila */
.app-table tbody tr:hover {
  background-color: #f3f4f6;  /* un gris muy suave */
}

/* Opcional: que las celdas mantengan el padding y no se “pegue” el color */
.app-table tbody tr:hover td {
  background-color: #f3f4f6;
}
.app-table .status-approved {
  background-color: #16a34a !important;
  color: #fff !important;
}
.app-table .status-rejected {
  background-color: #dc2626 !important;
  color: #fff !important;
}
.app-table .status-pending {
  background-color: #fbbf24 !important;
  color: #1f2937 !important;
}

.app-table th, .app-table td {
  white-space: normal;     /* “ajustar texto” estilo Excel */
  word-wrap: break-word;
}

/* Modal overlay */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal {
  background: #fff;
  padding: 24px;
  border-radius: var(--radius);
  width: 90%;
  max-width: 400px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.modal header {
  font-size: 1.25rem;
  margin-bottom: 16px;
  border-radius: 10px;
}
.modal .close-btn {
  position: absolute;
  top: 12px; right: 12px;
  background: none; border: none;
  font-size: 1.25rem;
  cursor: pointer;
}
.calendar-table {
  width: 100%;
  table-layout: fixed;    /* fuerza que todas las columnas sean del mismo ancho */
}

.calendar-table th,
.calendar-table td {
  box-sizing: border-box;
  /* si quieres un salto de línea automático dentro de la celda: */
  word-wrap: break-word;
  vertical-align: text-top;
}

.report-card {
  background:#fff; border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,.08); padding:16px;
 
}
.report-card h3 { margin:0 0 10px; color:#1f2937; font-size:1rem; }

.report-form .row { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:12px; }
.report-form label { font-size:12px; color:#374151; }
.report-form input, .report-form select {
  width:100%; padding:8px 10px; border:1px solid #d1d5db; border-radius:8px;
}

.reports-table { width:100%; border-collapse: collapse; font-size: small;}
.reports-table th, .reports-table td { padding:8px; border:1px solid #e5e7eb; text-align:center; }
.reports-table th { background:#3e8e0f6b; }
.reports-table tfoot td { font-weight:700; background:#aed09a; }
.badge-muted { font-size:12px; color:#6b7280; }

 #reminder-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.35);
    display: none; align-items: center; justify-content: center;
    z-index: 9999;
  }
  .reminder-card {
    width: min(520px, 92vw); background: #fff; color: #222;
    border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.2);
    padding: 16px 16px 12px;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }
  .reminder-card h4 { margin: 4px 0 8px; font-size: 16px; }
  .reminder-meta { font-size: 12px; color: #666; margin-bottom: 8px; }
  .reminder-text { font-size: 14px; white-space: pre-wrap; margin-bottom: 12px; }
  .reminder-actions { display: flex; gap: 8px; justify-content: flex-end; }
  .reminder-actions button {
    border: 0; padding: 8px 12px; border-radius: 8px; cursor: pointer;
  }
  .reminder-actions .ghost { background: #f2f2f2; }
  .reminder-actions .primary { background: #2563eb; color: #fff; }
  .reminder-actions .warn { background: #f59e0b; color: #fff; }

  .btn[disabled] { opacity:.6; cursor:not-allowed; }
  .fichaje-busy-mask {
    position:fixed; inset:0; background:rgba(255,255,255,.2);
    display:none; align-items:center; justify-content:center; z-index:9998;
  }
  .fichaje-busy-mask.show { display:flex; }
  .spinner {
    width:28px; height:28px; border:3px solid #ddd; border-top-color:#2563eb;
    border-radius:50%; animation:spin 0.9s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg);} }

  /* Toast */
  #toast {
    position:fixed; right:16px; top:16px; z-index:9999; display:flex; flex-direction:column; gap:8px;
  }
  .toast-item {
    background:#111; color:#fff; padding:10px 12px; border-radius:8px; box-shadow:0 6px 24px rgba(0,0,0,.25);
    font: 14px/1.3 system-ui; max-width: 320px;
  }
  .toast-success { background:#16a34a; }
  .toast-error   { background:#dc2626; }

 /* Aviso grande centrado */
  #toast-center {
    position: fixed; inset: 0;
    display: none; align-items: center; justify-content: center;
    z-index: 10000; /* por encima de la máscara (9998) */
    pointer-events: none; /* deja pasar clicks fuera de la tarjeta */
  }
  #toast-center.show { display: flex; }
  .toastc {
    pointer-events: auto;
    min-width: 320px; max-width: 90vw;
    background: #111; color: #fff;
    border-radius: 16px; padding: 18px 22px;
    box-shadow: 0 24px 80px rgba(0,0,0,.35);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 700; font-size: 22px; line-height: 1.2;
    transform: scale(.96); opacity: 0; animation: toastc-in .18s ease-out forwards;
    position: relative;
  }
  .toastc.success { background: #16a34a; }  /* verde */
  .toastc.error   { background: #dc2626; }  /* rojo  */
  .toastc .subtitle {
    margin-top: 6px; font-weight: 500; font-size: 14px; opacity: .95;
  }
  .toastc .close {
    position: absolute; top: 8px; right: 10px; border: 0;
    background: transparent; color: #fff; font-size: 18px; cursor: pointer;
    opacity: .9;
  }
  .toastc .close:hover { opacity: 1; }
  @keyframes toastc-in { to { transform: scale(1); opacity: 1; } }

/* --- FICHA (dialog moderno) --- */
:root{
  --fg:#111827; --muted:#6b7280; --bord:#e5e7eb; --bg:#ffffff; --brand:#111827;
}
dialog.ficha {
  width:min(92vw);
  height:min(90vh);
  border:none; padding:0; border-radius:16px;
  background:var(--bg); color:var(--fg);
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
dialog::backdrop { background:rgba(0,0,0,.4); backdrop-filter: blur(3px); }

.ficha__header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--bord);
}

.ficha__footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--bord);
  background: var(--secondary);
}


.ficha__title { margin:0; font-size:16px; font-weight:700; letter-spacing:.2px; }

.ficha__tabs {
  display:flex; gap:6px; padding:10px 12px; border-bottom:1px solid var(--bord);
}
.ficha__tab {
  border:none; background:transparent; padding:8px 10px; border-radius:10px;
  color:var(--muted); font-weight:700; cursor:pointer;
}
.ficha__tab:hover{ background:#f3f4f6; color:var(--fg); }
.ficha__tab[aria-selected="true"]{ background:#3f8f10; color:#fff; }

.ficha__body {
  padding:16px 18px; height:calc(100% - 52px - 42px); /* header + tabs */
  overflow:auto;
}

/* Datos (grid minimal) */
.ficha-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.ficha-item .label{ font-size:11px; color:var(--muted); }
.ficha-item .value{ font-weight:700; margin-top:2px; }

/* Documentación */
.doc-bar { display:flex; gap:10px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.doc-status{ font-size:12px; color:var(--muted); }

.app-table.modern th, .app-table.modern td{ padding:9px 10px; }
.app-table.modern thead th{
  font-size:12px; color:var(--muted); background:#fafafa; border-bottom:1px solid var(--bord);
}
.app-table.modern tbody tr{ border-bottom:1px solid var(--bord); }
.app-table.modern tbody tr:hover{ background:#fafafa; }

/* Scrollbar sutil (webkit) */
.ficha__body::-webkit-scrollbar{ width:10px; }
.ficha__body::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:999px; }


/* ===== Timeline vertical ===== */
.pv-timeline{position:relative}
.pv-timeline::before{
  content:"";position:absolute;left:10px;top:6px;bottom:6px;width:2px;background:#e6e6e6;border-radius:2px;
}
.pv-tl-item{position:relative;margin:10px 0 18px 0}
.pv-tl-marker{
  position:absolute;left:-2px;top:6px;width:12px;height:12px;background:#fff;border:3px solid #6ca3ff;border-radius:50%;box-shadow:0 0 0 2px #fff;
}
.pv-tl-content{
  background:#fff;border:1px solid #eaeaea;border-radius:10px;padding:10px 12px;box-shadow:0 1px 2px rgba(0,0,0,.03)
}
.pv-tl-head{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:6px}
.pv-tl-date{font-size:12px;color:#666}
.pv-tl-action{font-weight:600;color:#222}
.pv-tl-state{display:flex;align-items:center;gap:8px;margin:6px 0}
.pv-tl-arrow{opacity:.6}
.pv-tag{display:inline-block;background:#eef4ff;color:#1b4fb8;border:1px solid #dbe7ff;border-radius:999px;padding:2px 8px;font-size:12px}
.pv-tag--muted{background:#f5f6f7;color:#555;border-color:#eceff2}
.pv-tl-comment{margin:6px 0 2px 0;white-space:pre-wrap;word-break:break-word}
.pv-tl-foot{margin-top:4px;font-size:12px;color:#555}

.pv-hist-form{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.pv-hist-form select,.pv-hist-form input{padding:8px 10px;border:1px solid #d8d8d8;border-radius:8px}
/* Tarjetas premium para TPV en el histórico */

.pv-tl-item--tpv {
  font-size: 13px;
}

.pv-tl-card {
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: #0b1120; /* fondo oscuro elegante */
  color: #e5e7eb;
  display: flex;
  gap: 10px;
}

  .pv-tl-card--ok {
    border-left: 4px solid #22c55e;  
  }

  .pv-tl-card--ko {
    border-left: 4px solid #dc2626;
  }

  .pv-tl-card--partial {
    border-left: 4px solid #f59e0b;   /* ámbar */
  }

  .pv-tl-marker--partial {
    background-color: #f59e0b;
    border-color: #fed7aa;
  }

.pv-tl-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
  background: radial-gradient(circle at 30% 30%, #ffffff, #00ff5e 40%, #37be69  80%);
  color: #0b1120;
}

.pv-tl-card--ko .pv-tl-card__icon {
  background: radial-gradient(circle at 30% 30%, #ffffff, #d85151 40%, #d00000 80%);
}

.pv-tl-card--partial .pv-tl-card__icon {
  background: radial-gradient(circle at 30% 30%, #ffffff, #f59e0b 40%, #8c5a06 80%);
}

.pv-tl-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pv-tl-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  justify-content: space-between;
}

.pv-tl-card__title {
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pv-tl-card__chip {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.6);
  background: rgba(15,23,42,0.8);
}

.pv-tl-card__amount {
  font-size: 16px;
  font-weight: 700;
}

.pv-tl-card__metaRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 11px;
  color: #9ca3af;
}

.pv-tl-card__metaItem strong {
  color: #e5e7eb;
}

.pv-tl-card__footer {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #9ca3af;
  margin-top: 4px;
}

/* Integramos con tus clases existentes: marcador + contenido */

.pv-tl-item--tpv .pv-tl-marker {
  margin-top: 16px; /* alineado vertical con la tarjeta */
}

.pv-tl-content--tpv {
  background: transparent;
  border: none;
  padding: 0;
}



/* Contenedor de botones */
#nav-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Grupo de navegación */
.nav-group {
  margin-bottom: 6px;
  
}

/* Cabecera del grupo */
.nav-group-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  border-radius: 6px;
  background: #aed09a;
  color: #000000;
  padding: 5px 5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 4px rgb(0 0 0 / 10%);
}




.nav-group-header:hover {
  background: #398b08f7;
}

.nav-group-title {
  font-size: 13px;
}

.nav-group-arrow {
  font-size: 11px;
}

/* Cuerpo del grupo: colapsado por defecto */
.nav-group-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height .2s ease-out;
  padding-left: 4px;
}

/* Abierto */
.nav-group-body.is-open {
  max-height: 500px; /* suficiente para varios botones */
}
.nav-group-body.is-open.nav-group-header {
 box-shadow: 0 0px 0px rgb(0 0 0 / 0%);
}

/* Botones dentro del grupo */
.nav-group-body .nav-btn {
  margin-top: 4px;
  width: 100%;
  justify-content: flex-start;
}

/* === Estado ACTIVO de un botón === */
.nav-btn.nav-btn--active { 
  background: #cdcdcd;       
  color: #000000;
  border-radius: 6px;
  box-shadow: 0 0 0 0.5px #aed09a;
}

/* si tienes iconos tipo material-symbols, ayúdale un poco: */
.nav-btn.nav-btn--active .nav-icon {
  font-weight: 700;
}

.pv-modal {
  position: fixed;
  inset: 0;
  display: none;               /* se muestra con display:flex en JS */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.pv-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}

.pv-modal__dialog {
  position: relative;
  background: #ffffff;
  min-width: 540px;
  max-width: 720px;
  max-height: 90vh;
  border-radius: 14px;
  box-shadow: 0 15px 40px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
}

.pv-modal__header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid #e5e7eb;
}

.pv-modal__body {
  padding:16px;
  overflow:auto;
}

.pv-modal__footer {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:16px;
}

.pv-modal__close {
  border:none;
  background:transparent;
  font-size:16px;
  cursor:pointer;
}

.pv-form {
  display:grid;
  gap:16px;
}

.pv-card {
  background:#e7efe7;
  border:1px solid #e6e6e6;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  padding:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}

.pv-card__title {
  margin:0 0 12px;
  font-size:16px;
  font-weight:600;
  color:#222;
}

.pv-grid,
.pv-grid.pv-grid--2 {
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px 16px;
}

.pv-col-2 {
  grid-column:span 2;
}

.bf-contrato-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
}

.bf-contrato-col {
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.bf-contrato-col .pv-field {
  width:100%;
}

.bf-contrato-field-horizontal {
  display:flex;
  align-items:center;
  gap:10px;
}

.bf-contrato-field-horizontal label {
  min-width:130px;
  margin:0;
}

.bf-contrato-field-horizontal input,
.bf-contrato-field-horizontal select {
  flex:1;
  width:100%;
}

.bf-ficha .bf-status-field label {
  font-weight:700;
  color:#374151;
}

.bf-ficha .bf-status-control {
  border-radius:999px;
  padding:6px 10px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  border-width:1px;
}

.bf-ficha .bf-status-control--muted {
  background:#f3f4f6;
  border-color:#d1d5db;
  color:#6b7280;
}

.bf-ficha .bf-status-control--info {
  background:#eff6ff;
  border-color:#bfdbfe;
  color:#1d4ed8;
}

.bf-ficha .bf-status-control--success {
  background:#ecfdf5;
  border-color:#a7f3d0;
  color:#047857;
}

.bf-ficha .bf-status-control--warning {
  background:#fffbeb;
  border-color:#fcd34d;
  color:#b45309;
}

.bf-ficha .bf-status-control--danger {
  background:#fef2f2;
  border-color:#fca5a5;
  color:#b91c1c;
}

.pv-section {
  margin-bottom:18px;
}

.pv-section__header {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  padding:6px 4px;
  background: #d2e9c5;
}

.pv-section__title {
  margin:0;
  font-size:13px;
  font-weight:600;
  color:#374151;
}

.pv-section__hint {
  font-size:11px;
  color:#9ca3af;
}

.bf-ficha .pv-card {
  padding:12px 14px;
}

.bf-ficha .pv-section {
  margin-bottom:16px;
}



.bf-ficha .pv-section__title {
  font-size:12px;
  line-height:1.2;
}

.bf-ficha .pv-section__hint {
  font-size:10px;
  color:#9ca3af;
}

.bf-ficha .bf-card-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

.bf-ficha .bf-card-title {
  margin:0;
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  color:#374151;
}

.bf-ficha .bf-card-hint {
  font-size:10px;
  color:#9ca3af;
}

.bf-ficha .bf-gestoria-layout {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.bf-ficha .bf-gestoria-row {
  display:grid;
  gap:10px 14px;
}

.bf-ficha .bf-gestoria-row--3 {
  grid-template-columns:repeat(3, minmax(0,1fr));
}

.bf-ficha .bf-gestoria-row--4 {
  grid-template-columns:repeat(4, minmax(0,1fr));
}

.bf-ficha .bf-gestoria-row--2 {
  grid-template-columns:repeat(2, minmax(0,1fr));
}

.bf-ficha .bf-cliente-layout {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.bf-ficha .bf-cliente-row {
  display:grid;
  gap:10px 14px;
}

.bf-ficha .bf-cliente-row--1 {
  grid-template-columns:1fr;
}

.bf-ficha .bf-cliente-row--2 {
  grid-template-columns:repeat(2, minmax(0,1fr));
}

.bf-ficha .bf-cliente-fila6-row--2{
  grid-template-columns: 0.5fr 1fr 0.5fr 0.5fr 0.5fr 0.5fr;
}

.bf-ficha .bf-cliente-row--3 {
  grid-template-columns:repeat(3, minmax(0,1fr));
}

.bf-ficha .bf-cliente-fila4-row--3{
  grid-template-columns: 1fr 2fr 3fr;
}

.bf-ficha .bf-cliente-row--4 {
  grid-template-columns:repeat(4, minmax(0,1fr));
}

.bf-ficha .bf-cliente-fila7-row--4{
  grid-template-columns: 0.2fr 0.2fr 0.3fr 0.2fr 1.5fr;
}

.bf-ficha .bf-cliente-fila1-row--4{
  grid-template-columns: 1fr 6fr 3fr 3fr;
}

.bf-ficha .bf-cliente-row--5 {
  grid-template-columns:repeat(5, minmax(0,1fr));
}

.bf-ficha .bf-cliente-fila5-row--5{
  grid-template-columns: 1fr 1fr 1fr 0.5fr 1fr 1fr;
}

.bf-ficha .bf-cliente-fila3-row--5{
  grid-template-columns: 1fr 1fr 1fr 3fr 3fr 2fr;
}

.bf-ficha .bf-cliente-row--7 {
  grid-template-columns:repeat(7, minmax(0,1fr));
}

.bf-ficha .bf-cliente-fila2-row--7{
  grid-template-columns: 1.5fr 3fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 1fr 1fr 0.5fr;
}

.bf-ficha .bf-cliente-row--iban {
  grid-template-columns:76px 86px 86px 64px 280px;
  align-items:end;
  padding:10px 12px;
  border-radius:12px;  
}

.bf-ficha .bf-cliente-row--iban .pv-field {
  margin:0;
}

.bf-ficha .bf-cliente-row--iban .pv-field label {
  color:#4b5563;
  font-weight:600;
}

.bf-ficha .bf-alumno-layout {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.bf-ficha .bf-alumno-row {
  display:grid;
  gap:10px 14px;
}

.bf-ficha .bf-alumno-row--1 {
  grid-template-columns:1fr;
}

.bf-ficha .bf-alumno-row--2 {
  grid-template-columns:repeat(2, minmax(0,1fr));
}

.bf-ficha .bf-alumno-row--3 {
  grid-template-columns:repeat(3, minmax(0,1fr));
}

.bf-ficha .bf-alumno-fila2-row--3 {
  grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.bf-ficha .bf-alumno-row--4 {
  grid-template-columns:repeat(4, minmax(0,1fr));
}

.bf-ficha .bf-alumno-fila1-row--4{
  grid-template-columns: 1fr 1fr 1fr 0.5fr 0.5fr 1fr 1fr;
}

.bf-ficha .bf-alumno-row--5 {
  grid-template-columns:repeat(5, minmax(0,1fr));
}

.bf-ficha .bf-alumno-fila3-row--5{
  grid-template-columns: 1fr 1fr 0.8fr 0.8fr 0.8fr 1.5fr;
}

.bf-ficha .bf-horario-field__controls {
  display:grid;
  grid-template-columns:minmax(140px, 180px) minmax(0,1fr);
  gap:8px;
}

.bf-ficha .bf-horario-field {
  align-self:end;
}

.bf-ficha .bf-horario-field__help {
  display:block;
  margin-top:4px;
  font-size:10px;
  color:#6b7280;
}

.bf-ficha .pv-grid,
.bf-ficha .pv-grid.pv-grid--2,
.bf-ficha .bf-contrato-grid {
  gap:10px 14px;
}

.bf-ficha .bf-contrato-col {
  gap:10px;
}

.bf-ficha .pv-field label {
  font-size:11px;
  margin-bottom:4px;
  line-height:1.2;
}

.bf-ficha .pv-field input,
.bf-ficha .pv-field select,
.bf-ficha .pv-field textarea {
  padding:8px 10px;
  font-size:13px;
}

.bf-ficha .pv-field textarea {
  min-height:68px;
}

.pv-field label {
  display:block;
  font-size:12px;
  color:#555;
  margin-bottom:6px;
}

.pv-field input,
.pv-field select,
.pv-field textarea {
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #d8d8d8;
  background:#fff;
  font-size:14px;
  transition:border-color .15s,box-shadow .15s;
}

.pv-field input:focus,
.pv-field select:focus,
.pv-field textarea:focus {
  outline:none;
  border-color:#6ca3ff;
  box-shadow:0 0 0 3px rgba(108,163,255,.15);
}

.pv-help small {
  color:#777;
}

.error-field {
  border-color:#c00 !important;
  background-color:#ffecec;
}

@media (max-width:768px) {
  .pv-modal__dialog {
    min-width: 90vw;
  }
}

@media (max-width:860px) {
  .pv-grid,
  .pv-grid.pv-grid--2 {
    grid-template-columns: 1fr;
  }
  .pv-col-2 {
    grid-column:span 1;
  }
}

@media (max-width:1200px) {
  .bf-contrato-grid {
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .bf-ficha .bf-gestoria-row--4 {
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .bf-ficha .bf-cliente-row--7,
  .bf-ficha .bf-cliente-row--5 {
    grid-template-columns:repeat(3, minmax(0,1fr));
  }

  .bf-ficha .bf-cliente-row--4 {
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .bf-ficha .bf-cliente-row--iban {
    grid-template-columns:repeat(3, minmax(0,1fr));
  }

  .bf-ficha .bf-alumno-row--5 {
    grid-template-columns:repeat(3, minmax(0,1fr));
  }

  .bf-ficha .bf-alumno-row--4 {
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width:680px) {
  .bf-contrato-grid {
    grid-template-columns:1fr;
  }

  .bf-ficha .bf-gestoria-row--3,
  .bf-ficha .bf-gestoria-row--4,
  .bf-ficha .bf-gestoria-row--2 {
    grid-template-columns:1fr;
  }

  .bf-ficha .bf-cliente-row--2,
  .bf-ficha .bf-cliente-row--3,
  .bf-ficha .bf-cliente-row--4,
  .bf-ficha .bf-cliente-fila1-row--4,
  .bf-ficha .bf-cliente-row--5,
  .bf-ficha .bf-cliente-row--7,
  .bf-ficha .bf-cliente-row--iban {
    grid-template-columns:1fr;
  }

  .bf-ficha .bf-alumno-row--2,
  .bf-ficha .bf-alumno-row--3,
  .bf-ficha .bf-alumno-fila2-row--3,
  .bf-ficha .bf-alumno-row--4,
  .bf-ficha .bf-alumno-row--5 {
    grid-template-columns:1fr;
  }

  .bf-ficha .bf-horario-field__controls {
    grid-template-columns:1fr;
  }
}

#btn-whatsapp {
  background-color: #25D366 !important;
  color: white !important;
  display:flex;
  align-items:center;
  gap:6px;
}


/* ===== Banner instalación PWA ===== */
.pwa-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.92); /* tono oscuro */
  backdrop-filter: blur(6px);
  display: none;
  justify-content: center;
}

.pwa-banner-content {
  width: 100%;
  max-width: 560px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  color: #f9fafb;
  font-size: 0.9rem;
}

.pwa-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pwa-banner-text strong {
  font-size: 0.95rem;
}

.pwa-banner-text span {
  opacity: 0.9;
}

.pwa-banner-actions {
  display: flex;
  gap: 6px;
}

/* Botones del banner (reutilizando tu estilo) */
.pwa-banner-btn {
  border-radius: 999px;
  border: none;
  padding: 6px 12px;
  font-size: 0.85rem;
  cursor: pointer;
  font-weight: 600;
}

.pwa-banner-btn.primary {
  background: var(--primary);
  color: #fff;
}

.pwa-banner-btn.secondary {
  background: rgba(148, 163, 184, 0.25);
  color: #e5e7eb;
}

/* En móviles ocupa bien todo el ancho */
@media (max-width: 768px) {
  .pwa-banner-content {
    flex-direction: column;
    align-items: stretch;
  }
  .pwa-banner-actions {
    justify-content: flex-end;
  }
}


.pv-tl-marker--ok {
  background-color: #16a34a;   /* verde */
  border-color: #bbf7d0;
}

.pv-tl-marker--ko {
  background-color: #b91c1c;   /* rojo */
  border-color: #fecaca;
}


.pv-tl-content--ok {
  background-color: #dcfce7 !important;   /* verde muy suave */
  border-left: 3px solid #16a34a !important;
  border-radius: 6px;
  padding: 6px 10px;
}

.pv-tl-content--ko {
  background-color: #fee2e2 !important;   /* rojo suave */
  border-left: 3px solid #b91c1c !important;
  border-radius: 6px;
  padding: 6px 10px;
}