/* ============== THEME / BASE ============== */
/* 🎨 PALETA DE COLORES - MODO OSCURO */
#pks-app-container {
  --bg: #1B1C1D;
  --bg-elev: #282A2C;
  --card: #282A2C;
  --muted: #9CA3AF;
  --text: #F9FAFB;
  --primary: #3B82F6;
  --accent: #10B981;
  --danger: #EF4444;
  --warning: #F59E0B;
  --border: #323943;
  --glow: 0 0 12px rgba(59, 130, 246, 0.4);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  --radius: 12px; /* <-- CAMBIO A 12PX */
  --focus: 0 0 0 3px rgba(59, 130, 246, 0.4);
  /* Base styles from body */
  margin:0;
  font-family:"Google Sans","Product Sans","Inter",system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  transition:background .2s,color .2s;
  height: 100%;
}

/* ============== HELPERS ============== */
body.pks-body-no-scroll {
  overflow: hidden;
}

/* ☀️ PALETA DE COLORES - MODO CLARO (NUEVA ESTRATEGIA VISUAL) */
:root.theme-light #pks-app-container {
  --bg: #F1F5F9;           /* Fondo general con más contraste */
  --bg-elev: #FFFFFF;      /* Fondo de tarjetas, sidebar y header blanco puro */
  --card: #FFFFFF;         /* Alias para --bg-elev */
  --muted: #6B7280;        /* Texto secundario (gris oscuro) */
  --text: #111827;         /* Texto principal (muy oscuro para contraste AAA) */
  --primary: #2563EB;      /* Azul primario intenso */
  --accent: #059669;       /* Verde oscuro para buen contraste */
  --danger: #DC2626;       /* Rojo oscuro */
  --warning: #D97706;      /* Naranja oscuro */
  --border: #CBD5E1;       /* Borde más visible pero suave */
  --glow: 0 0 10px rgba(37, 99, 235, 0.2);
  --shadow: none;          /* Sombra eliminada para un look "flat" */
  --focus: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

#pks-app-container *{box-sizing:border-box}
#pks-app-container a{color:var(--primary);text-decoration:none}
#pks-app-container .btn {
  -webkit-tap-highlight-color: transparent;
}
#pks-app-container .hidden{display:none!important}
#pks-app-container .container{max-width:1600px;margin:0 auto;padding:16px}/* max-width: 100%; <-- CAMBIO CLAVE: Ocupa siempre el ancho completo */
@media (max-width:768px){#pks-app-container .container{padding:8px}} /* móvil: padding lateral mínimo */
#pks-app-container .card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s,border-color .25s,background .2s,color .2s}
#pks-app-container .card:hover{transform:translateY(-2px);box-shadow:0 14px 45px rgba(0,0,0,.45)}
#pks-app-container .card.pad{padding:12px}

#pks-app-container .btn {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.4rem 1rem; /* --- Padding vertical reducido, horizontal ajustado --- */
  border-radius: 999px; /* --- Aumentado para un efecto "píldora" muy redondeado --- */
  cursor: pointer;
  transition: transform .15s, filter .15s, box-shadow .15s, border-color .15s;
  font-weight: 400; /* --- Hacemos el texto un poco más notorio --- */
  display: inline-flex; /* --- Mejora la alineación del texto y los íconos --- */
  align-items: center;
  justify-content: center;
}

#pks-app-container .btn:active {
  transform: scale(0.96); /* Mantiene el efecto de pulso */
  border-color: var(--accent); /* Cambia el color del borde a verde */
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.6); /* Añade el resplandor (glow) verde */
}
#pks-app-container .btn.primary{border-color:transparent;background:var(--primary);color:var(--bg-elev)} /* Mejor contraste para el texto del botón */
#pks-app-container .btn.ghost{background:transparent}
#pks-app-container .btn.icon{display:inline-grid;place-items:center;width:36px;height:36px;padding:0}
#pks-app-container .btn.glow{box-shadow:var(--glow)}
#pks-app-container .btn.glow-outline{background:transparent;border:1px solid var(--primary);box-shadow:0 0 0 2px rgba(108,180,255,.15)}
#pks-app-container .btn.glow-outline.danger{border-color:var(--danger);box-shadow:0 0 0 2px rgba(255,107,107,.18)}
#pks-app-container .btn.danger-outline {
  border-color: rgba(239, 68, 68, 0.55); /* Borde rojo pastel */
  color: var(--danger);
  font-weight: 500;
  transition: all 0.2s ease;
}
#pks-app-container .btn.danger-outline:hover {
  background-color: rgba(239, 68, 68, 0.08); /* Fondo rojo muy sutil al pasar el cursor */
  border-color: var(--danger);
}
#pks-app-container .btn.loadmore {
  display: block;
  margin: 14px auto 6px;
  background: transparent; /* 1. Fondo transparente */
  border: 1px solid var(--primary); /* Borde con el color primario del tema */
  color: var(--primary); /* 2. Texto con color adaptable a cada tema */
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px 0 rgba(59, 130, 246, 0.5),  /* Resplandor azul (se mantiene) */
              0 2px 10px 0 rgba(16, 185, 129, 0.3);   /* Resplandor verde (se mantiene) */
  transition: all 0.2s ease; /* Transición suave para todos los cambios */
}

#pks-app-container .btn.loadmore:hover {
  transform: translateY(-2px);
  background: var(--primary); /* Se rellena con color al pasar el mouse */
  color: var(--bg-elev); /* El texto cambia a claro para el contraste */
  box-shadow: 0 6px 20px 0 rgba(59, 130, 246, 0.65),
              0 4px 15px 0 rgba(16, 185, 129, 0.4);
}
#pks-app-container .input,#pks-app-container select,#pks-app-container textarea,#pks-app-container .ts-control{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--border);padding:.58rem .7rem;border-radius:12px;outline:none;transition:background .2s, border-color .2s; font-family: inherit;}
#pks-app-container textarea.input { height: auto; }
#pks-app-container .input:focus,#pks-app-container select:focus,#pks-app-container textarea:focus,#pks-app-container .ts-control:focus{box-shadow:var(--focus);border-color:var(--primary)}
:root.theme-light #pks-app-container .input, :root.theme-light #pks-app-container select, :root.theme-light #pks-app-container textarea, :root.theme-light #pks-app-container .ts-
  control { background: var(--bg-elev); } /* Fondo blanco para inputs en modo claro */
#pks-app-container label{font-size:.88rem;color:var(--muted);margin-bottom:.35rem;display:block}
#pks-app-container .grid{display:grid;gap:16px} #pks-app-container .grid.cols-2{grid-template-columns:1fr 1fr} #pks-app-container .grid.cols-3{grid-template-columns:repeat(3,1fr)} #pks-app-container .grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){#pks-app-container .grid.cols-3,#pks-app-container .grid.cols-4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){#pks-app-container .grid.cols-2,#pks-app-container .grid.cols-3,#pks-app-container .grid.cols-4{grid-template-columns:1fr}}
#pks-app-container .small{font-size:.9rem} #pks-app-container .xsmall{font-size:.82rem}
#pks-app-container .pill{padding:.18rem .55rem;background:rgba(255,255,255,0.08);border:1px solid var(--border);border-radius:999px;font-size:.72rem}
/* ================== FIX: Placeholder Text Color ================== */
#pks-app-container .input::placeholder,
#pks-app-container textarea::placeholder,
#pks-app-container .ts-control input::placeholder {
  color: var(--muted);
  opacity: 1; /* Previene que el navegador aclare el color por defecto */
}
/* Layout */
/* Modificado */
#pks-app-container .layout{display:grid;grid-template-columns:210px 1fr;grid-template-rows:auto 1fr;min-height:100vh;grid-template-areas:"sidebar header" "sidebar main";transition: grid-template-columns 0.3s ease;}
/* Reglas corregidas para apuntar a 'body.sidebar-collapsed' */
body.sidebar-collapsed #pks-app-container .layout{grid-template-columns:0 1fr}
body.sidebar-collapsed #pks-app-container .sidebar{transform:translateX(-100%);position:absolute}
#pks-app-container header{grid-area:header;background:var(--bg-elev);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:8px 12px;position:sticky;top:0;z-index:2000}
#pks-app-container .brand{display:flex;align-items:center;gap:10px;font-weight:800}
#pks-app-container .brand .dot{width:10px;height:10px;background:var(--accent);border-radius:999px;box-shadow:0 0 20px var(--accent);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 rgba(0,209,178,.4)}50%{box-shadow:0 0 12px rgba(0,209,178,1)}100%{box-shadow:0 0 0 rgba(0,209,178,.4)}}
#pks-app-container main{grid-area:main;padding:1px;overflow-x:hidden}
@media (max-width:768px){#pks-app-container main{padding:8px}} /* menos padding móvil */
/* Sidebar */
/* Modificado */
#pks-app-container .sidebar{grid-area:sidebar;background:var(--bg-elev);border-right:1px solid var(--border);width:210px;padding:16px;position:sticky;top:0;height:100vh;transition:transform .3s;display:flex;flex-direction:column;overflow-y:auto}
/* Modificado - Ajustar el Texto y Espaciado del Menú */
#pks-app-container .nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: .30rem .75rem; /* <-- VALOR MODIFICADO - padding menu (era .5rem) */
    border-radius: 50px;
    color: var(--text);
    font-size: .9rem;
}
#pks-app-container .nav a.active,#pks-app-container .nav a:hover{background:rgba(255,255,255,0.08)}
:root.theme-light #pks-app-container .nav a:hover, :root.theme-light #pks-app-container .nav a.active { background: rgba(0,0,0,0.05); } /* Hover sutil en modo claro */
/* SOLUCIÓN 2: Selector específico para userbox para evitar overrides */
#pks-app-container .layout .sidebar .userbox {
    display:flex;gap:10px;align-items:center;margin-top:16px;
    padding:10px;border:1px solid var(--border);border-radius:14px;
    background:rgba(255,255,255,0.06);
}
:root.theme-light #pks-app-container .layout .sidebar .userbox { background: transparent; }
#pks-app-container .userbox .avatar{width:36px;height:36px;border-radius:999px;border:2px solid rgba(0,209,178,.65);box-shadow:0 0 12px rgba(0,209,178,.35)}
/* Mobile sidebar */
@media (max-width:768px){
  #pks-app-container .layout{grid-template-columns:1fr;grid-template-areas:"header" "main"}
  #pks-app-container .sidebar{position:fixed;top:0;left:0;height:100%;width:240px;background:var(--bg-elev);transform:translateX(-100%);transition:transform .3s ease;z-index:1000;padding-top:72px;overflow-y:auto}
  #pks-app-container .sidebar.open{transform:translateX(0)}
  #pks-app-container #sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .3s;z-index:999}
  #pks-app-container #sidebar-overlay.show{opacity:1;pointer-events:auto}
}
#pks-app-container .only-mobile{display:none}#pks-app-container .only-desktop{display:inline-flex}
@media (max-width:768px){#pks-app-container .only-mobile{display:inline-flex}#pks-app-container .only-desktop{display:none}}
/* Login */
#pks-app-container .login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
#pks-app-container .logo{display:flex;align-items:center;gap:10px;font-weight:800}
#pks-app-container .logo .dot{width:14px;height:14px;border-radius:999px;background:var(--primary);box-shadow:0 0 24px var(--primary);animation:pulse 2.2s infinite}
#pks-app-container .login-card{width:min(480px,100%);padding:20px}
#pks-app-container .form-row{display:flex;gap:12px}#pks-app-container .form-row>*{flex:1}
#pks-app-container .hint{font-size:.85rem;color:var(--muted)}
/* ========= Toasts (Rediseñado y Reubicado) ========= */
#pks-app-container .toasts {
  position: fixed;
  bottom: 20px;
  right: 20px;
  transform: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
  width: max-content;
  max-width: 90%;
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; transform: scale(0.95); }
}

#pks-app-container .toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  font-size: 0.95rem;
  min-width: 350px;
  max-width: 500px;
  color: #fff;
  animation: slideUp 0.4s ease-out forwards;
}

#pks-app-container .toast.fade-out {
  animation: fadeOut 0.3s ease-in forwards;
}

#pks-app-container .toast__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}

#pks-app-container .toast__icon svg {
  width: 100%;
  height: 100%;
}

#pks-app-container .toast__body {
  flex-grow: 1;
}

#pks-app-container .toast__close {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0;
  transition: opacity 0.2s;
}

#pks-app-container .toast__close:hover {
  opacity: 1;
}

/* Colores por tipo de notificación */
#pks-app-container .toast--success { background-color: #E8F9F1; color: #1DC055;}
#pks-app-container .toast--error   { background-color: #F9EDED; color: #D14F51;}
#pks-app-container .toast--warning { background-color: #FFF9E3; color: #CA9600; } /* Texto oscuro para contraste */
#pks-app-container .toast--info    { background-color: #EAF1F9; color: #457DC6;}
/* KPI / Rankings */
/* Modificado */
#pks-app-container .kpi-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(5, 1fr); /* Vista de escritorio ahora con 5 columnas */
  margin-bottom: 14px;
}

/* Ajuste para tablets: 2 columnas */
@media (max-width: 900px) {
  #pks-app-container .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Ajuste para móviles: 1 columna */
@media (max-width: 640px) {
  #pks-app-container .kpi-grid {
    grid-template-columns: 1fr;
  }
}
#pks-app-container .kpi{padding:14px} #pks-app-container .kpi h4{margin:0 0 10px;font-weight:700}#pks-app-container .kpi .big{font-size:1.5rem;font-weight:800}
#pks-app-container .kpi .delta.up{color:var(--accent)}#pks-app-container .kpi .delta.down{color:var(--danger)}#pks-app-container .kpi .icon{float:right;opacity:.6}
#pks-app-container .rank-sections{display:grid;gap:12px}
@media (min-width:900px){#pks-app-container .rank-sections{grid-template-columns:repeat(3,1fr);gap:16px}}
#pks-app-container .rank-card{background:rgba(255,255,255,0.06);border:1px solid var(--border);border-radius:14px;padding:12px;position:relative}
:root.theme-light #pks-app-container .rank-card { background: transparent; }
#pks-app-container .rank-card::before{content:"";position:absolute;left:12px;top:12px;width:8px;height:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 14px rgba(0,209,178,.85)}
#pks-app-container .rank-head{display:flex;gap:8px;align-items:center;margin-bottom:8px}
#pks-app-container .rank-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,0.04);margin-top:8px}
:root.theme-light #pks-app-container .rank-item {
  display: flex;
  align-items: center;
  gap: 12px; /* Añade un espacio fijo entre el texto y los botones */
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  margin-top: 8px;
}
#pks-app-container .rank-left {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-grow: 1; /* Permite que el contenedor de texto se expanda */
  min-width: 0; /* Asegura que el texto largo se ajuste correctamente y no desborde */
}
#pks-app-container .rank-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0; /* CRÍTICO: Evita que los botones se encojan o se superpongan */
}
#pks-app-container .rank-num{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,0.08);border:1px solid var(--border);color:var(--text);font-weight:700;font-size:.9rem}
#pks-app-container .rank-score{font-weight:800;color:var(--primary)}
/* Eventos */
#pks-app-container .ev-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
#pks-app-container .ev-card{padding:14px;position:relative}
#pks-app-container .ev-title{font-weight:800;margin:0 0 8px;font-size:1rem;letter-spacing:.2px;padding-right:100px}
#pks-app-container .ev-meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:.8rem;padding-right:100px}
#pks-app-container .sep{height:1px;background:linear-gradient(90deg,var(--border),transparent);margin:8px 0}
#pks-app-container .ev-body{font-size:.92rem;line-height:1.45;padding-right:10px}
#pks-app-container .ev-invol{font-size:.86rem;color:var(--muted)}
#pks-app-container .ev-actions{position:absolute;right:10px;top:10px;display:flex;gap:8px;z-index:2}
#pks-app-container .ev-thumbs{display:flex;gap:8px;margin:8px 0;overflow:auto}
#pks-app-container .ev-thumbs img{width:92px;height:68px;object-fit:cover;border-radius:10px;border:1px solid var(--border);cursor:pointer;transition:transform .15s}
#pks-app-container .ev-thumbs img:hover{transform:translateY(-1px)}
#pks-app-container .ev-foot{margin-top:6px;color:var(--muted);font-size:.78rem; line-height: 1.5;}
/* Niños */
#pks-app-container .kid-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
#pks-app-container .kid{padding:14px;display:flex;gap:12px;align-items:flex-start;position:relative}
#pks-app-container .kid::before{content:"";position:absolute;left:14px;top:14px;width:8px;height:8px;background:var(--accent);border-radius:999px;box-shadow:0 0 10px rgba(0,209,178,.9)}
#pks-app-container .kid-avatar{min-width:50px;height:50px;border-radius:999px;display:grid;place-items:center;background:var(--card);border:2px solid var(--accent);box-shadow:0 0 12px rgba(0,209,178,.35);font-weight:800}
:root.theme-light #pks-app-container .kid-avatar { background: var(--primary); color: var(--bg-elev); }
@media (max-width:768px) {
  #pks-app-container .kid-avatar {
    min-width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }
}
@media (min-width: 769px) {
  #pks-app-container .kid-avatar {
    min-width: 35px;
    height: 35px;
    font-size: 0.85rem;
  }
}
#pks-app-container .kid-main h4{margin:0;font-size:.98rem;padding-right: 110px;}
#pks-app-container .kid-main .row{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:.86rem;margin-top:6px}
#pks-app-container .kid-actions{position:absolute;right:10px;top:10px;display:flex;gap:8px;z-index:2}
#pks-app-container .divider{height:1px;background:linear-gradient(90deg,var(--border),transparent);margin:8px 0}
/* Inputs con botón clear */
#pks-app-container .input-wrap{position:relative}
#pks-app-container .input-wrap .clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;padding:.2rem .4rem;cursor:pointer;font-size:.8rem;color:var(--muted)}
/* Modales */
#pks-app-container .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;place-items:center;z-index:3000}
:root.theme-light #pks-app-container .modal-backdrop{background:rgba(17, 24, 39, 0.4)}
#pks-app-container .modal-backdrop.show{display:grid}
#pks-app-container .modal{width:min(980px,94vw);background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;}
#pks-app-container .modal header{position:unset;border-bottom:1px solid var(--border)}
#pks-app-container .modal .content{padding:16px;overflow:auto}
#pks-app-container .modal footer{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--border)}
#pks-app-container .muted{color:var(--muted)}
/* Confirm modal */
#pks-app-container #confirmBox .modal, #pks-app-container #modalPlanAccion .modal {width:min(480px,94vw)}
#pks-app-container #confirmBox .content{font-size:1rem}
/* File inputs ancho */
#pks-app-container input[type="file"].input{width:100%}
/* Password toggle */
#pks-app-container .pw-wrap{position:relative}
#pks-app-container .pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:1rem}
/* Progress bar */
#pks-app-container .progress-container {
  width: 100%;
  background-color: var(--border);
  border-radius: 4px;
  margin: 8px 0;
}
#pks-app-container .progress-bar {
  height: 8px;
  border-radius: 4px;
  background-color: var(--primary);
  width: 0%;
  transition: width 0.3s ease;
}
/* Informes & Aprendizajes (tarjetas) */
#pks-app-container .inf-grid, #pks-app-container .ap-grid {display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
#pks-app-container .inf-card, #pks-app-container .ap-card {padding:14px;display:flex;gap:12px;align-items:flex-start;position:relative}
#pks-app-container .inf-card::before, #pks-app-container .ap-card::before {content:"";position:absolute;left:14px;top:14px;width:8px;height:8px;background:var(--accent);border-radius:999px;box-shadow:0 0 10px rgba(0,209,178,.9)}
#pks-app-container .inf-avatar, #pks-app-container .ap-avatar {min-width:50px;height:50px;border-radius:999px;display:grid;place-items:center;background:var(--card);border:2px solid var(--accent);box-shadow:0 0 12px rgba(0,209,178,.35);font-weight:800}
:root.theme-light #pks-app-container .inf-avatar, :root.theme-light #pks-app-container .ap-avatar { background: var(--primary); color: var(--bg-elev); }
@media (max-width:768px) {
  #pks-app-container .inf-avatar, #pks-app-container .ap-avatar { min-width: 30px; height: 30px; font-size: 0.8rem; }
}
@media (min-width: 769px) {
  #pks-app-container .inf-avatar, #pks-app-container .ap-avatar { min-width: 35px; height: 35px; font-size: 0.85rem; }
}
#pks-app-container .inf-main, #pks-app-container .ap-main {flex: 1; /* Se elimina el padding-right */}
#pks-app-container .inf-main h4, #pks-app-container .ap-main h4 {margin:0 0 8px;font-size:1rem}
#pks-app-container .inf-main .row, #pks-app-container .ap-main .row {display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:var(--muted);font-size:.86rem;margin-top:6px}
#pks-app-container .inf-actions, #pks-app-container .ap-actions {display: flex; /* Se elimina el posicionamiento absoluto */ flex-direction: column;gap: 8px;}
/* Tabs */
#pks-app-container .tabs {display:flex;border-bottom:1px solid var(--border);margin-bottom:12px}
#pks-app-container .tab {padding:8px 16px;cursor:pointer;border-bottom:2px solid transparent;color:var(--muted)}
#pks-app-container .tab:hover {color:var(--text)}
#pks-app-container .tab.active {border-bottom-color:var(--primary);color:var(--text);font-weight:600}
/* Aprendizajes - Vista de Matriz */
#pks-app-container .matrix-table-wrap {
  overflow-x: auto;
  max-width: 100%; /* <-- Añade esta línea */
}
#pks-app-container .matrix-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
#pks-app-container .matrix-table th, #pks-app-container .matrix-table td { border: 1px solid var(--border); padding: 6px; text-align: left; font-size: 0.85rem; vertical-align: middle; }
#pks-app-container .matrix-table th { background-color: rgba(255,255,255,0.05); white-space: nowrap; }
:root.theme-light #pks-app-container .matrix-table th { background-color: rgba(0,0,0,0.03); }
#pks-app-container .matrix-table td:first-child { font-weight: 600; min-width: 150px; }
#pks-app-container .matrix-table .input { padding: 0.3rem 0.5rem; font-size: 0.8rem; border-radius: 8px; }
#pks-app-container .matrix-legend { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; font-size: 0.85rem; color: var(--muted); }
#pks-app-container .matrix-legend-item { display: flex; align-items: center; gap: 6px; }
#pks-app-container .status-circle { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); }
#pks-app-container .matrix-status-selector .status-circle { cursor: pointer; opacity: 0.3; transition: opacity 0.2s, transform 0.2s; }
#pks-app-container .matrix-status-selector.disabled .status-circle { cursor: default; }
#pks-app-container .matrix-status-selector .status-circle:hover { opacity: 0.7; }
#pks-app-container .matrix-status-selector .status-circle.active { opacity: 1; transform: scale(1.15); box-shadow: 0 0 8px var(--glow); }
#pks-app-container .status-circle.green { background-color: var(--accent); }
#pks-app-container .status-circle.yellow { background-color: var(--warning); }
#pks-app-container .status-circle.red { background-color: var(--danger); }
#pks-app-container .matrix-status-selector { display: flex; justify-content: center; align-items: center; gap: 5px; }

/* ========= ASISTENCIA STYLES ========= */
#pks-app-container .asistencia-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
#pks-app-container .asistencia-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  border: 1px solid transparent;
  transition: border-color 0.2s, background-color 0.2s;
}
:root.theme-light #pks-app-container .asistencia-row { background-color: rgba(0,0,0,0.03); }
#pks-app-container .asistencia-row:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
#pks-app-container .asistencia-kid-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
#pks-app-container .asistencia-actions .btn {
  font-size: 0.7rem;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background-color: transparent;
}
#pks-app-container .asistencia-actions .btn.active {
  color: var(--bg-elev);
  transform: scale(1.05);
  box-shadow: var(--glow);
}
#pks-app-container .asistencia-actions .btn.asistio.active { background-color: var(--accent); border-color: var(--accent); }
#pks-app-container .asistencia-actions .btn.ausente.active { background-color: var(--danger); border-color: var(--danger); }
#pks-app-container .asistencia-actions .btn.justificado.active { background-color: var(--primary); border-color: var(--primary); }
#pks-app-container .asistencia-actions .btn.tarde.active { background-color: var(--warning); border-color: var(--warning); }
:root.theme-light #pks-app-container .asistencia-actions .btn.tarde.active { color: var(--text); }



/* ========= FIX: Matrix View on Mobile (Enhanced with Sticky Column) ========= */
@media (max-width: 768px) {
  #pks-app-container .matrix-table th, #pks-app-container .matrix-table td {
    padding: 8px;
    font-size: 0.8rem;
    white-space: nowrap; /* Evita que el texto de las cabeceras se parta */
  }

  /* --- STICKY FIRST COLUMN LOGIC --- */
  #pks-app-container .matrix-table th:first-child,
  #pks-app-container .matrix-table td:first-child {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    left: 0;
    z-index: 2; /* Se asegura que la columna esté por encima del resto */

    /* El fondo es crucial para ocultar el texto que se desplaza por detrás */
    background-color: var(--card);

    /* Damos un ancho fijo y permitimos que los nombres largos se ajusten */
    width: 140px;
    min-width: 140px;
    white-space: normal;

    /* Un borde sutil para separar la columna fija del resto */
    border-right: 1px solid var(--border);
  }

  /* La cabecera de la columna fija debe estar por encima de todo */
  #pks-app-container .matrix-table th:first-child {
      z-index: 3;
  }
}

/* ========= PAGOS & MORAS STYLES ========= */
#pks-app-container .pagos-params-grid {
  display: grid;
  gap: 12px 16px;
  grid-template-columns: 1fr; /* Default para móvil */
}

/* En pantallas más grandes, se pone en una fila */
@media (min-width: 900px) {
  #pks-app-container .pagos-params-grid {
    grid-template-columns: 2fr 2fr 1.5fr 1.5fr;
    align-items: flex-end;
  }
}
#pks-app-container .pagos-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
#pks-app-container .pagos-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}
#pks-app-container .pagos-table th, #pks-app-container .pagos-table td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  font-size: 0.88rem;
  vertical-align: middle;
}
#pks-app-container .pagos-table th {
  background-color: rgba(255,255,255,0.05);
}
:root.theme-light #pks-app-container .pagos-table th {
  background-color: rgba(0,0,0,0.03);
}
#pks-app-container .status-pill {
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#pks-app-container .status-pill.pending { background-color: var(--muted); color: var(--text); }
#pks-app-container .status-pill.paid { background-color: var(--accent); color: var(--bg-elev); }
#pks-app-container .status-pill.late { background-color: var(--warning); color: var(--text); }
#pks-app-container .status-pill.mora { background-color: var(--danger); color: var(--bg-elev); }
#pks-app-container .status-pill.partial { background-color: var(--primary); color: var(--bg-elev); }
#pks-app-container .status-pill.exempt { background-color: var(--border); color: var(--muted); }
:root.theme-light #pks-app-container .status-pill.late { color: var(--text); }


/* ========= PAGOS & MORAS RESPONSIVE ========= */
@media (max-width: 768px) {
  #pks-app-container .pagos-table thead {
    display: none; /* Ocultamos la cabecera original en móvil */
  }
  #pks-app-container .pagos-table tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 12px;
    padding: 8px;
  }
  #pks-app-container .pagos-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;
    border: none;
    padding: 6px 4px;
    border-bottom: 1px dashed var(--border);
  }
  #pks-app-container .pagos-table tr td:last-child {
    border-bottom: none;
  }
  #pks-app-container .pagos-table td::before {
    content: attr(data-label); /* Usamos el atributo data-label como cabecera de fila */
    font-weight: 600;
    text-align: left;
    margin-right: 16px;
    color: var(--muted);
  }
  #pks-app-container .pagos-table td .btn.icon {
  width: auto; /* <-- Se ajusta el ancho para que no ocupe todo el espacio */
  }
}

/* --- AÑADE ESTA NUEVA CLASE --- */
/* FIX: Eleva la tarjeta de filtros cuando un dropdown está activo */
#pks-app-container .filters-card--elevated {
  z-index: 30 !important; /* Asegura que la tarjeta de filtros se ponga por encima de las demás */
}	

/* FIX: Unifica la altura mínima de todos los gráficos principales */
#pks-app-container #pg_an_charts > .card,
#pks-app-container #dashboardCharts > .card,
#pks-app-container #as_an_charts > .card,
#pks-app-container #ap_an_charts > .card,
#pks-app-container #pg_ind_charts > .card {
  min-height: 300px;
}
  
/* --- NUEVA CLASE PARA EL TEXTO DE MEJORES ÁREAS --- */
#pks-app-container .best-area-list {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
}
  
/* === Estilos de Color para Etiquetas de Eventos === */

/* Estilo para 'Incidente' (Rojo) */
#pks-app-container .pill.incidente {
    background-color: rgba(239, 68, 68, 0.15);
    color: var(--danger);
    border-color: rgba(239, 68, 68, 0.2);
}

/* Estilo para 'Enfermedad' (Azul) */
#pks-app-container .pill.enfermedad {
    background-color: rgba(59, 130, 246, 0.15);
    color: var(--primary);
    border-color: rgba(59, 130, 246, 0.2);
}

/* Estilo para 'Higiene' (Ámbar/Amarillo) */
#pks-app-container .pill.higiene {
    background-color: rgba(245, 158, 11, 0.15);
    color: var(--warning);
    border-color: rgba(245, 158, 11, 0.2);
}

/* Estilo para 'Felicitación' (Verde Positivo) */
#pks-app-container .pill.felicitacion {
    background-color: rgba(16, 185, 129, 0.15);
    color: var(--accent);
    border-color: rgba(16, 185, 129, 0.2);
}
/* El tipo 'General' usará el estilo gris por defecto de .pill */
  
/* --- Estilos para el Logo de la Aplicación --- */
#pks-app-container .app-logo {
    height: 24px; /* Ajusta la altura de tu logo según sea necesario */
    width: auto;  /* Mantiene la proporción del logo */
    vertical-align: middle; /* Alinea el logo con el punto verde */
}
  
/* --- Estilos para el Logo en el Formulario de Acceso --- */

/* Ajusta el contenedor para centrar el logo */
#pks-app-container .login-card .logo {
    justify-content: center;
    gap: 0;
}

/* Define el tamaño del logo */
#pks-app-container .login-logo {
    height: 40px; /* Puedes ajustar esta altura según el tamaño de tu logo */
    width: auto;
}

/* --- Solución para el parpadeo inicial (FOUC) --- */
.pks-initializing #loginView,
.pks-initializing #appView {
  display: none !important;
}

/* ========= FIX: Botones y Matriz en Móvil ========= */
@media (max-width: 768px) {
  #ap_matrix_buttons {
    flex-direction: column;
    align-items: stretch;
  }
  #ap_matrix_buttons .btn {
    width: 100%;
  }
}

/* ========= FIX DEFINITIVO: Color de fondo en Matriz (Modo Claro y Oscuro) ========= */
/* Esta regla asegura que la celda del encabezado fijo tenga el mismo fondo que las celdas de su columna */
.matrix-table th:first-child {
    background-color: var(--card);
}
/* Regla específica para el modo claro para asegurar la anulación de otros estilos */
:root.theme-light .matrix-table th:first-child {
    background-color: var(--card);
}


/* ========= Estilos personalizados para Títulos H1, H2, H3, H4, H5========= */
#pks-app-container h2 {
  font-size: 1.5rem; /* Tamaño de letra */
     /* color: #10B981; // Color verde menta*/
  border-bottom: 1px solid var(--border); /* Línea divisora sutil */
  padding-bottom: 8px; /* Espacio debajo del título */
}

#pks-app-container h3 {
    font-size: 1.3rem; /* Tamaño de letra */
     /* Color más suave -    color: var(--muted); */
}

#pks-app-container h4 {
    font-size: 1.2rem; /* Tamaño de letra */
    color: var(--muted); /* Color más suave */
}

#pks-app-container h5 {
    font-size: 1.0rem; /* Tamaño de letra */
    color: var(--muted); /* Color más suave */
}


/* ========= MEJORA: Estilos para etiquetas en barras de progreso ========= */
.labeled-progress {
  display: flex;
  align-items: center;
  gap: 12px; /* Espacio entre la barra y el texto */
  margin-bottom: 4px; /* Espacio entre cada línea de la distribución */
}

.labeled-progress .progress-container {
  flex-grow: 1; /* Hace que la barra ocupe el espacio disponible */
  margin: 0; /* Anula el margen que tenía antes */
}

.labeled-progress .progress-label-outside {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0; /* Evita que el texto se encoja */
  width: 55px; /* Ancho fijo para alinear los porcentajes */
  text-align: right;
}


/* ========================================================================== */
/* == ESTILO MINIMALISTA Y UNIFICADO PARA TODOS LOS SELECTORES == */
/* ========================================================================== */

/* Hace que el contenedor de TomSelect imite a un selector nativo */
#pks-app-container .ts-control {
  padding: .50rem .7rem !important; /* Ajuste fino de padding */
}
#pks-app-container .ts-control:hover {
  border-color: var(--primary);
}

/* Estilo para las píldoras de items en selección múltiple */
#pks-app-container .ts-control > .item {
  background: var(--primary);
  color: var(--bg-elev);
  border-radius: 6px;
  padding: 4px 8px;
  font-weight: 500;
  margin: 0 4px 0 0;
}

/* Elimina el estilo de píldora para los selectores de un solo item,
haciendo que se vean como un selector nativo simple. */
#pks-app-container .ts-wrapper.single .ts-control .item {
  background: none;
  color: inherit;
  padding: 0;
  font-weight: normal;
}

/* Estilo del menú desplegable para que coincida con el tema */
#pks-app-container .ts-dropdown {
  background: var(--card);
  border: 1px solid var(--border);
}
#pks-app-container .ts-dropdown .option:hover {
  background-color: var(--primary);
  color: #fff;
}
:root.theme-light #pks-app-container .ts-dropdown .option:hover {
    color: var(--bg-elev);
}
#pks-app-container .ts-dropdown .active {
  background-color: rgba(108, 180, 255, 0.2);
}


/* ========================================================================== */
/* == AJUSTES FINALES DE ESTILO (FILTROS Y FOUC) == */
/* ========================================================================== */

/* --- 1. FIX: Texto invisible en dropdowns (Modo Oscuro) --- */
/* Esta regla asegura que el texto de las opciones sea siempre legible. */
#pks-app-container .ts-dropdown .option {
  color: var(--text);
}
#pks-app-container .ts-dropdown .option:hover {
  color: #fff; /* Texto blanco al pasar el cursor sobre una opción */
}
:root.theme-light #pks-app-container .ts-dropdown .option:hover {
    color: var(--bg-elev);
}


/* --- 2. FIX: Estilo especial para el filtro "Apoderado/Niño" --- */
/* Anulamos el estilo de píldora azul solo para este selector */
#pks-app-container #pg_nino_select + .ts-wrapper.single .ts-control .item {
  background: none;
  padding: 0;
  font-weight: normal;
  color: inherit !important;
}

/* Aplicamos el fondo verde especial al texto seleccionado (Modo Oscuro) */
#pks-app-container #pg_nino_select + .ts-wrapper.single.has-items .ts-control > div {
    background-color: rgba(16, 185, 129, 0.90);
    color: #A7F3D0 !important;
    border-radius: 8px;
    padding: 4px 10px;
    display: inline-block;
}

/* Aplicamos el fondo verde especial al texto seleccionado (Modo Claro) */
:root.theme-light #pks-app-container #pg_nino_select + .ts-wrapper.single.has-items .ts-control > div {
    background-color: rgba(16, 185, 129, 0.95);
    color: #065f46 !important;
}


/* --- 3. FIX: Flash de Estilos (FOUC) en filtros de Aprendizaje --- */
/* Oculta selectores específicos que usan TomSelect para evitar el parpadeo inicial */
#pks-app-container #ap_nino,
#pks-app-container #ap_ano,
#pks-app-container #ap_trim,
#pks-app-container #ap_an_anos,
#pks-app-container #ap_an_trim,
#pks-app-container #ap_an_ninos,
#pks-app-container #ap_an_areas,
#pks-app-container #ap_rk_anos,
#pks-app-container #ap_rk_trimestres {
    opacity: 0;
    height: 0;
    position: absolute;
    z-index: -1;
}
#pks-app-container #db_ninos,
#pks-app-container #db_tipos {
    display: none;
}


/* ========================================================================== */
/* == AJUSTE VISUAL MÓDULO EVENTOS == */
/* ========================================================================== */

/* Añade un espacio superior a la grilla de tarjetas SOLO en el módulo de eventos */
#pks-app-container #route-eventos .ev-grid {
  margin-top: 16px;
}

/* Ajuste de espacio para la grilla de tarjetas del módulo Niños */
#pks-app-container #route-ninos .kid-grid {
  margin-top: 16px;
}



/* ========================================================================== */
/* == CORRECCIÓN DE ESTILO v2: AVATARES MÓDULO PERFIL == */
/* ========================================================================== */

/* Estilo para el botón que envuelve el avatar. Se eliminan bordes y sombras. */
#pks-app-container #avatarList .btn.icon {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 2px; /* Pequeño espacio para que el borde no se corte */
  border-radius: 50%;
  width: auto;
  height: auto;
  transition: transform 0.2s ease;
}

/* Efecto sutil de escala al pasar el cursor, sin brillos. */
#pks-app-container #avatarList .btn.icon:hover {
  transform: scale(1.05);
}

/* Estilo para la imagen del avatar. El borde es transparente por defecto. */
#pks-app-container #avatarList .btn.icon img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid transparent; /* Borde invisible por defecto */
  display: block;
  transition: border-color 0.2s ease;
}

/* Muestra un borde verde FINO únicamente en el avatar SELECCIONADO. */
#pks-app-container #avatarList .btn.icon.selected img {
  border-color: var(--accent);
}



/* ========================================================================== */
/* == AJUSTE RESPONSIVE: GRÁFICOS DE PAGOS INDIVIDUALES == */
/* ========================================================================== */

/* Define el espaciado entre los gráficos */
#pks-app-container #pg_ind_charts {
  gap: 16px; /* Espaciado por defecto para escritorio */
}

/* En móvil, cuando los gráficos se apilan, aumenta el espaciado vertical */
@media (max-width: 640px) {
  #pks-app-container #pg_ind_charts,
  #pks-app-container #as_an_charts {
    gap: 24px; /* Aumenta el espaciado vertical a 24px en pantallas pequeñas */
  }
}


/* ========================================================================== */
/* == AJUSTES DE INTERACTIVIDAD PARA MODO CLARO == */
/* ========================================================================== */

/* Elimina la sombra y el movimiento en el hover de las tarjetas no interactivas */
:root.theme-light #pks-app-container .card:hover {
  transform: none;
  box-shadow: none;
}

/* Define el fondo del sidebar ligeramente más oscuro que el fondo de página */
:root.theme-light #pks-app-container .sidebar {
  background: #F1F5F9;
}

/* Añade feedback visual en hover para filas interactivas */
:root.theme-light #pks-app-container .asistencia-row:hover,
:root.theme-light #pks-app-container .rank-item:hover {
  background-color: #F8FAFC; /* Fondo muy sutil al pasar el cursor */
}


/* ========= UNIDADES STYLES ========= */
#pks-app-container #un_meses_container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#pks-app-container .un-mes-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
#pks-app-container .un-mes-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
#pks-app-container .un-mes-header h4 {
  margin: 0;
  flex-grow: 1;
  color: var(--text);
}
#pks-app-container .un-drag-handle {
  cursor: grab;
  color: var(--muted);
}
#pks-app-container .un-color-picker {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
#pks-app-container .un-color-picker::-webkit-color-swatch {
  border-radius: 50%;
  border: 2px solid var(--border);
}
#pks-app-container .un-color-picker::-moz-color-swatch {
  border-radius: 50%;
  border: 2px solid var(--border);
}
#pks-app-container .un-unidad-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 60px;
}
#pks-app-container .un-empty-list-msg {
  text-align: center;
  padding: 16px;
  border: 2px dashed var(--border);
  border-radius: 10px;
}
#pks-app-container .un-unidad-item {
  background-color: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border); /* Borde izquierdo por defecto */
  border-radius: 10px;
  padding: 10px;
  cursor: grab;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: border-left-color 0.3s ease; /* Transición suave para el color */
}

/* Estilo para la unidad completada */
#pks-app-container .un-unidad-item.realizada {
  background-color: var(--bg);
}

#pks-app-container .un-unidad-actions .btn-edit-comentario {
  background: var(--bg);
  border-color: var(--warning);
  color: var(--warning);
}
#pks-app-container .un-unidad-info {
  flex-grow: 1;
}
#pks-app-container .un-unidad-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
#pks-app-container .un-unidad-id {
  font-size: 0.7rem;
  font-weight: bold;
}
#pks-app-container .un-unidad-details {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
#pks-app-container .un-unidad-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
#pks-app-container .un-status-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--bg);
  padding: 4px;
  border-radius: 99px;
  border: 1px solid var(--border);
}
#pks-app-container .un-status-toggle .btn {
  padding: 2px 10px;
  font-size: 0.75rem;
  border: none;
}
#pks-app-container .un-status-toggle .btn.active {
  background-color: var(--primary);
  color: var(--bg-elev);
}
#pks-app-container .un-status-toggle .btn[data-status="null"].active { background-color: var(--muted); }
#pks-app-container .un-status-toggle .btn[data-status="1"].active { background-color: var(--accent); }
#pks-app-container .un-status-toggle .btn[data-status="0"].active { background-color: var(--danger); }
#pks-app-container .un-status-toggle .btn[data-status="1"].active { background-color: var(--accent); }
#pks-app-container .un-status-toggle .btn[data-status="0"].active { background-color: var(--danger); }
#pks-app-container .un-comentario-wrap {
  width: 100%;
  margin-top: 8px;
}
#pks-app-container .un-admin-list {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 8px;
}
/* SortableJS Helper Classes */
#pks-app-container .sortable-ghost {
  opacity: 0.4;
  background: var(--primary);
  border-style: dashed;
}
#pks-app-container .sortable-drag {
  opacity: 0.9;
  box-shadow: var(--shadow);
  transform: scale(1.02);
}

/* ========= UNIDADES FIX: RESPONSIVE ACTIONS (VERSIÓN DEFINITIVA) ========= */
@media (max-width: 500px) {
  #pks-app-container .un-unidad-item {
    flex-direction: column;
    align-items: flex-start;
  }
  #pks-app-container .un-unidad-actions {
    width: 100%;
    margin-top: 12px;
    flex-wrap: wrap; /* Permite que los elementos internos se envuelvan */
    gap: 8px; /* Espacio entre todos los elementos de acción */
    justify-content: flex-start; /* Alinea los íconos a la izquierda */
  }
  #pks-app-container .un-status-toggle {
    width: 100%; /* El grupo de estado ocupa todo el ancho */
    margin-top: 8px; /* Espacio que lo separa de los íconos de arriba */
    justify-content: flex-end; /* Alinea los botones (Sí, No) a la derecha */
  }
}

/* ========= UNIDADES STYLES: PLEGADO / DESPLEGADO (VERSIÓN CORREGIDA) ========= */
#pks-app-container .un-mes-header .un-toggle-collapse {
  padding: 0;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  color: var(--text);
  opacity: 0.7;
  cursor: pointer;
}
#pks-app-container .un-mes-header .un-toggle-collapse svg {
  transition: transform 0.3s ease;
  width: 20px; /* <-- CORRECCIÓN 1: Se define un tamaño para el ícono. */
  height: 20px;
}
#pks-app-container .un-unidad-list {
  transition: all 0.3s ease-out;
  max-height: 2000px;
  overflow: hidden;
}

/* ESTADO COLAPSADO */
#pks-app-container .un-mes-group.is-collapsed .un-unidad-list {
  max-height: 0;
  min-height: 0; /* <-- CORRECCIÓN 2: Se anula la altura mínima para colapsar al 100%. */
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  border: none; /* <-- Se oculta cualquier borde residual. */
}
#pks-app-container .un-mes-group.is-collapsed .un-toggle-collapse svg {
  transform: rotate(-90deg);
}


/* ========= UNIDADES FIX: DRAG HANDLE ========= */
#pks-app-container .un-unidad-item {
  cursor: default; /* El cursor normal para la tarjeta */
}
#pks-app-container .un-unidad-drag-handle {
  cursor: grab; /* El cursor de agarre solo para el ícono */
  color: var(--muted);
}


/* ========= FIX: Z-INDEX DE MODAL DE CONFIRMACIÓN ========= */
/* Esta regla asegura que la caja de confirmación siempre aparezca
   por encima de cualquier otro modal que ya esté abierto. */
#pks-app-container #confirmBox {
  z-index: 3500;
}


/* ========= CALENDARIO STYLES ========= */
#pks-app-container .cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

#pks-app-container .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background-color: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

#pks-app-container .cal-day, #pks-app-container .cal-header-day {
  background-color: var(--card);
  padding: 8px;
  min-height: 100px;
  position: relative;
}

#pks-app-container .cal-header-day {
  min-height: auto;
  font-weight: 600;
  text-align: center;
  background-color: var(--bg-elev);
  padding: 10px 8px;
  font-size: 0.85rem;
}

#pks-app-container .cal-day.other-month {
  background-color: var(--bg);
  opacity: 0.6;
}

#pks-app-container .cal-day.festivo {
  background-color: rgba(255, 255, 255, 0.04);
}
:root.theme-light #pks-app-container .cal-day.festivo {
  background-color: #F8FAFC;
}


#pks-app-container .cal-day .day-number {
  font-weight: 600;
}

#pks-app-container .cal-day.today .day-number {
  background-color: var(--primary);
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#pks-app-container .cal-day.has-event .day-number {
  background-color: var(--danger);
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#pks-app-container .cal-day-events {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  width: 250px;
  z-index: 100;
  box-shadow: var(--shadow);
  display: none;
}

#pks-app-container .cal-day-events-list {
  max-height: 150px;
  overflow-y: auto;
}

#pks-app-container .cal-day-event-item {
  font-size: 0.85rem;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

#pks-app-container .cal-day-event-item:last-child {
  border-bottom: none;
}


/* ========= MODAL CALENDARIO DÍA ========= */
#pks-app-container #modalCalendarioDia .modal {
  width: min(500px, 94vw);
}

#pks-app-container #cal_dia_events_list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#pks-app-container .cal-dia-event-item {
  background-color: rgba(255, 255, 255, 0.04);
  padding: 10px;
  border-radius: 8px;
  border-left: 3px solid var(--accent);
  font-size: 0.9rem;
}

:root.theme-light #pks-app-container .cal-dia-event-item {
  background-color: rgba(0, 0, 0, 0.03);
}


/* ========================================================================== */
/* == FIX VISUAL: MÓDULO INFORMES (TODAS LAS VISTAS) == */
/* ========================================================================== */

#pks-app-container .inf-main .row.xsmall {
  flex-direction: column; /* Apila los elementos (Niño y Periodo) verticalmente */
  align-items: flex-start; /* Alinea los textos a la izquierda */
  gap: 4px; /* Reduce el espacio entre las líneas para un look más compacto */
}



/* ========================================================================== */
/* == MÓDULO FONOAUDIOLOGÍA: ESTILOS ADICIONALES == */
/* ========================================================================== */

/* Estilo para la lista de historial y adjuntos dentro del modal */
#pks-app-container .fono-historial-item,
#pks-app-container .fono-adjunto-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  margin-bottom: 8px;
}
:root.theme-light #pks-app-container .fono-historial-item,
:root.theme-light #pks-app-container .fono-adjunto-item {
  background-color: rgba(0,0,0,0.03);
}

#pks-app-container .fono-item-content {
  flex-grow: 1;
}

#pks-app-container .fono-item-content .meta {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
}

#pks-app-container .fono-item-content p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap; /* Respeta los saltos de línea */
}

#pks-app-container .fono-item-actions {
  flex-shrink: 0;
  margin-left: 16px;
}



/* ========================================================================== */
/* == AJUSTE VISUAL: SEPARACIÓN EN REGISTRO DE ACTIVIDAD == */
/* ========================================================================== */

#log_list_container {
    margin-top: 30px; /* Añade un espacio superior al listado de logs */
}



/* ========================================================================== */
/* == FIX VISUAL: ICONOS DE REGISTRO DE ACTIVIDAD == */
/* ========================================================================== */

/* Ajusta el contenedor del icono para que el SVG se vea bien */
#log_list_container .rank-item .rank-num {
    background-color: transparent; /* Quita el fondo del círculo */
    border: none; /* Quita el borde del círculo */
    width: 24px;  /* Ajusta el ancho del contenedor */
    height: 24px; /* Ajusta la altura del contenedor */
}

/* Define el tamaño y color de los iconos SVG */
#log_list_container .rank-item .rank-num svg {
    width: 16px;
    height: 16px;
    fill: currentColor; /* El color se hereda del texto (var(--muted)) */
    opacity: 0.6; /* Suaviza el icono para que no sea tan prominente */
}