/* ===========================================================
   estilos.css - base unificada (cards, header fijo, sidebar)
   Paleta: mantenida según tu preferencia (modo claro / oscuro)
   =========================================================== */

/* ------------------------
   VARIABLES Y RESET
   ------------------------ */
:root{
  --header-h: 70px;

    --color-primario: #0979b0; 
    --color-secundario: #0cb7f2; 
    --color-acento: #0cb7f2; 
    --color-fondo: #def7ff; 
    --color-texto: #00001a; 
    --color-blanco: #ffffff;
    --color-borde: #7cdaf9;
    --sombra: 0 4px 8px rgba(0, 0, 0, 0.1);
}

*{box-sizing:border-box;margin:0;padding:0;font-family:"Segoe UI", Tahoma, sans-serif}
html,body{height:100%}

/* ------------------------
   MODO OSCURO (clase 'dark-mode' en body)
   ------------------------ */
body.dark-mode{
    --color-primario: #0979b0;
    --color-secundario: #0cb7f2;
    --color-acento: #0cb7f2;
    --color-fondo: #00001a;
    --color-texto: #e0f2f1;
    --color-blanco: #1a1a1a;
    --color-borde: #0c223f;
}

/* ------------------------
   LAYOUT PRINCIPAL - FIX SCROLL HORIZONTAL
   ------------------------ */
body{
  background:var(--color-fondo);
  color:var(--color-texto);
  transition:background .25s ease,color .25s ease;
  min-height:100vh;
  /* CRÍTICO: Evita que la pantalla se parta o deslice a la derecha */
  overflow-x: hidden; 
  position: relative;
}

/* HEADER */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--header-h);
  background:var(--color-blanco);
  border-bottom:1px solid rgba(0,0,0,0.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  z-index:1200; /* Encima de todo */
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.header-left{display:flex; align-items:center; gap:12px;}
.header-title{font-size:18px; color:var(--color-primario); margin:0;}
.header-right{display:flex; align-items:center; gap:10px;}

.menu-btn{background:transparent; border:none; font-size:22px; cursor:pointer; padding:8px; border-radius:8px; color:var(--color-primario);}
.dark-btn{background:transparent; border:none; font-size:18px; cursor:pointer; padding:8px; border-radius:8px;}
.header-left{
  display:flex;
  align-items:center;
  gap:12px;
}
.header-title{
  font-size:18px;
  color:var(--color-primario);
  margin:0;
}
.header-right{display:flex;align-items:center;gap:10px}

/* BOTONES DEL HEADER */
.menu-btn{
  background:transparent;
  border:none;
  font-size:22px;
  cursor:pointer;
  padding:8px;
  border-radius:8px;
  color:var(--color-primario);
}
.menu-btn:focus{outline:2px solid rgba(0,0,0,0.06)}
.dark-btn{
  background:transparent;
  border:none;
  font-size:18px;
  cursor:pointer;
  padding:8px;
  border-radius:8px;
}

/* ------------------------
   SIDEBAR (CORREGIDO)
   ------------------------ */
.sidebar{
  width:250px;
  position:fixed;
  top:var(--header-h);
  left:0;
  /* CRÍTICO: bottom:0 asegura que llegue al final de la pantalla siempre */
  bottom: 0; 
  background:var(--color-blanco);
  padding:18px;
  box-shadow:var(--sombra);
  transition:transform .28s ease;
  z-index:1150;
  border-right:1px solid rgba(0,0,0,0.04);
  /* CRÍTICO: Permite scrollear DENTRO del menú si es muy largo */
  overflow-y: auto; 
}
.sidebar nav ul{list-style:none;padding:0;margin:0}
.sidebar nav li{margin-bottom:8px}
.sidebar nav a{
  display:block; padding:10px 12px; text-decoration:none; color:var(--color-texto); border-radius:8px; transition:background .18s;
}
.sidebar nav a:hover{background:rgba(0,0,0,0.03)}

/* Estado cerrado por defecto (fuera de pantalla) */
.sidebar:not(.open){transform:translateX(-110%)}

/* ------------------------
   OVERLAY (NUEVO - Bloquea pantalla en móvil)
   ------------------------ */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Oscuro semi-transparente */
    z-index: 1100; /* Debajo del sidebar (1150) pero sobre el contenido */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px); /* Efecto borroso moderno */
}

/* Cuando el body tiene la clase sidebar-open, mostramos el overlay */
body.sidebar-open .sidebar-overlay {
    opacity: 1;
    visibility: visible;
}


/* ------------------------
   CONTENIDO
   ------------------------ */
.content{
  margin-top:calc(var(--header-h) + 18px);
  margin-left: 20px;
  padding:22px;
  transition:margin .28s ease;
  min-height: calc(100vh - var(--header-h) - 36px);
}

/* En escritorio, empujamos el contenido */
@media (min-width: 901px) {
    body.sidebar-open .content { margin-left: 250px; }
}

/* ------------------------
   MEDIA QUERIES - MÓVIL
   ------------------------ */
@media (max-width:900px){
  .menu-btn{display:inline-block}
  
  /* En móvil el sidebar sale "encima", no empuja el contenido */
  .content{margin-left:0 !important; padding:14px; width: 100%;}
  
  /* El sidebar en móvil ocupa un poco más de ancho si quieres, o dejar en 250px */
  .sidebar { width: 260px; }
  
  .sidebar.open{transform:translateX(0)}
  .sidebar:not(.open){transform:translateX(-105%)} /* Un poco menos para asegurar que se esconda */
}

/* ... (El resto de tus estilos de Cards, Tablas, Forms, etc. pégalos aquí abajo tal cual estaban) ... */
/* ... (INCLUYENDO LOS PARCHES QUE HICIMOS PARA MODAL ROLES Y MENSAJES) ... */

/* Estilos específicos para mensajes de Django */
.msg.success { background: #d4f8db; border-left-color: #2b9f40; color: #1b7a28; }
.msg.error { background: #ffe9e9; border-left-color: #c62828; color: #9b1a1a; }
.msg.warning { background: #fff3cd; border-left-color: #ffc107; color: #856404; }

/* FIX MODAL ROLES */
#roles-checkbox-list label { display: flex !important; align-items: center !important; width: 100% !important; margin: 0 !important; background: rgba(255, 255, 255, 0.05); }
#roles-checkbox-list input[type="checkbox"] { width: 20px !important; height: 20px !important; margin-right: 10px !important; flex-shrink: 0; cursor: pointer; }
#roles-checkbox-list span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.9rem; }

/* Grid Forms */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-bottom: 15px; }
.split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .split-layout { grid-template-columns: 1fr; } }
.search-bar-container { display: flex; gap: 8px; margin-bottom: 15px; align-items: center; }
.search-input { flex: 1; padding: 10px 15px; border-radius: 999px; border: 1px solid var(--color-borde); background: var(--color-fondo); color: var(--color-texto); }
.scroll-box { max-height: 500px; overflow-y: auto; padding-right: 5px; border: 1px solid var(--color-borde); border-radius: 8px; padding: 10px; background: var(--color-fondo); }
.obs-item { background: var(--color-blanco); padding: 10px; border-radius: 8px; margin-bottom: 10px; border-left: 3px solid var(--color-secundario); box-shadow: 0 2px 4px rgba(0,0,0,0.02); }

/* ------------------------
   CARDS
   ------------------------ */
.card{
  background:var(--color-blanco);
  padding:20px;
  border-radius:12px;
  box-shadow:var(--sombra);
  margin-bottom:18px;
}
body.dark-mode .card{background:#111; box-shadow: 0 6px 18px rgba(0,0,0,0.25)}

/* título de sección */
h2{color:var(--color-primario);margin-bottom:12px}

/* ------------------------
   FORMULARIOS
   ------------------------ */
.form-group{margin-bottom:12px}
label{display:block;margin-bottom:6px;font-weight:600;color:var(--color-texto)}
input,select,textarea{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--color-borde);
  background:var(--color-fondo);
  color:var(--color-texto);
  font-size:15px;
}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(77,182,172,0.12);border-color:var(--color-secundario)}

/* botones */
.btn{
  display:inline-block;
  background:var(--color-secundario);
  color:#fff;
  border:none;
  padding:10px 14px;
  border-radius:8px;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.btn:hover{transform:translateY(-1px); background:var(--color-primario)}

/* ------------------------
   TABLAS
   ------------------------ */
.table-container{overflow-x:auto;border-radius:10px;border:1px solid var(--color-borde);box-shadow:var(--sombra)}
table{width:100%;border-collapse:collapse}
th,td{padding:12px;border-bottom:1px solid var(--color-borde);text-align:left}
th{background:var(--color-fondo);color:var(--color-primario)}
.personal-table tbody tr:nth-child(odd){background:rgba(0,0,0,0.02)}
body.dark-mode .personal-table tbody tr:nth-child(odd){background:rgba(255,255,255,0.02)}

/* estilos para estado */
.estado{padding:6px 10px;border-radius:8px;font-weight:700;font-size:.9rem}
.estado.activo{background:#d4f8db;color:#1b7a28}
.estado.inactivo{background:#ffe9e9;color:#9b1a1a}

/* botones específicos */
.success-btn{background:#2b9f40;color:#fff;border-radius:8px;padding:8px 10px;border:none}
.danger-btn{background:#c62828;color:#fff;border-radius:8px;padding:8px 10px;border:none}

/* ------------------------
   LOGIN (centrado)
   ------------------------ */
.login-container{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-box{width:340px;padding:28px;border-radius:12px;background:var(--color-blanco);box-shadow:var(--sombra)}
.login-box h2{text-align:center;color:var(--color-primario);margin-bottom:16px}

/* ------------------------
   MEDIA QUERIES - MÓVIL
   ------------------------ */
@media (max-width:900px){
  .menu-btn{display:inline-block}
  .sidebar{position:fixed;top:var(--header-h);left:0}
  .sidebar.open{transform:translateX(0)}
  .sidebar:not(.open){transform:translateX(-110%)}
  .content{margin-left:0;padding:14px}
  .header-title{font-size:16px}
}

/* ------------------------
   UTILS: mensajes y animaciones
   ------------------------ */
.messages{margin-bottom:12px}
.msg{background:#e3f0ff;padding:10px;border-radius:8px;border-left:4px solid #0a65c5;color:#064f90}
body.dark-mode .msg{background:#16202b;border-left-color:#4d9aff;color:#d8e8ff}

/* ------------------------
   Justificacion bloques
   ------------------------ */

.justificacion-block {
  display: none; /* oculto por defecto */
  margin-top: 10px;
  padding: 10px;
  background: rgba(255, 230, 230, 0.3);
  border-left: 3px solid #c62828;
  border-radius: 6px;
}
.justificacion-block textarea {
  width: 100%;
  min-height: 60px;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--color-borde);
  resize: vertical;
  font-size: 14px;
}



/* ------------------------
   NUEVA SECCION
   ------------------------ */
/* ===========================================================
   NUEVOS ESTILOS PARA MÓDULOS (Residentes, Camas, Insumos)
   Agrega esto al final de static/estilos.css
   =========================================================== */

/* Grid para formularios (Responsive) */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

/* Layout de dos columnas (Ej: Editar Residente, Gestión Camas) */
.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* En móviles, las columnas se apilan */
@media (max-width: 900px) {
    .split-layout {
        grid-template-columns: 1fr;
    }
}

/* Estilo para la barra de búsqueda */
.search-bar-container {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    align-items: center;
}

.search-input {
    flex: 1;
    padding: 10px 15px;
    border-radius: 999px;
    border: 1px solid var(--color-borde);
    background: var(--color-fondo);
    color: var(--color-texto);
}

/* Scroll interno para historiales (Observaciones, logs) */
.scroll-box {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 5px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 10px;
    background: var(--color-fondo);
}

.obs-item {
    background: var(--color-blanco);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    border-left: 3px solid var(--color-secundario);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}


/* Estilos específicos para mensajes de Django */
.msg.success {
    background: #d4f8db;
    border-left-color: #2b9f40;
    color: #1b7a28;
}

.msg.error {
    background: #ffe9e9;
    border-left-color: #c62828;
    color: #9b1a1a;
}

.msg.warning {
    background: #fff3cd;
    border-left-color: #ffc107;
    color: #856404;
}

/* =========================================
   FIX MODAL ROLES (Corrección visual)
   Agrega esto al final de estilos.css
   ========================================= */

/* Forzamos al contenedor del checkbox a comportarse */
#roles-checkbox-list label {
    display: flex !important;      /* Alinea caja y texto horizontalmente */
    align-items: center !important;
    width: 100% !important;        /* Ocupa el espacio de la celda del grid */
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.05); /* Fondo sutil para distinguir */
}

/* Reseteamos el input para que NO sea 100% ancho */
#roles-checkbox-list input[type="checkbox"] {
    width: 20px !important;        /* Tamaño fijo pequeño */
    height: 20px !important;
    margin-right: 10px !important; /* Separación con el texto */
    flex-shrink: 0;                /* Evita que se aplaste */
    cursor: pointer;
}

/* Ajuste para el texto del rol */
#roles-checkbox-list span {
    white-space: nowrap;           /* Evita que el texto salte de línea feo */
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
}

/* =========================================
   NUEVO: Alerta de Stock Mínimo (JS Trigger)
   ========================================= */
.stock-low-alert {
    color: #c62828 !important; /* Color rojo fuerte */
    font-weight: 700;
}



/* --- estilos.css --- */

/* Base para split-layout: Columnas lado a lado por defecto (escritorio) */
.split-layout {
    display: flex;
    gap: 20px; /* Espacio entre las columnas */
    align-items: flex-start; /* Alinea los elementos al inicio */
    flex-wrap: nowrap; /* Evita que se envuelva en escritorio por defecto */
}

.split-layout > div {
    flex: 1; /* Distribuye el espacio equitativamente */
    min-width: 0; /* Permite que los elementos se encojan más allá de su contenido si es necesario */
}


/* --- Media Query para dispositivos móviles (pantallas pequeñas) --- */
@media (max-width: 768px) { /* Por ejemplo, pantallas de 768px o menos */
    .split-layout {
        flex-direction: column; /* Apila las columnas verticalmente */
        flex-wrap: wrap; /* Permite que los elementos se envuelvan */
        gap: 20px; /* Mantener el espacio entre las tarjetas */
    }

    .split-layout > div {
        flex: none; /* Deshabilita el flex-grow */
        width: 100%; /* Ocupa el ancho completo */
        max-width: 100%; /* Asegura que no se desborde */
        min-width: unset; /* Elimina cualquier min-width que pueda causar scroll */
    }
}


/* Adicional: Para las tablas dentro de card (ya deberías tener algo similar) */
.table-container {
    overflow-x: auto; /* Permite desplazamiento horizontal si la tabla es más grande */
    width: 100%; /* Ocupa el ancho disponible */
}

.personal-table {
    width: 100%; /* La tabla en sí misma es flexible */
    border-collapse: collapse;
    min-width: 480px; /* Opcional: Ancho mínimo para la tabla si no quieres que las columnas sean demasiado estrechas */
}


/* ===========================================================
   FINAL FIX: Botón de Ayuda Flotante (Botón Principal)
   =========================================================== */

.btn-flotante-ayuda {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    /* Usamos variables del tema */
    background-color: var(--color-primario); 
    color: var(--color-blanco);
    border-radius: 50%;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999; 
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s;
}

.btn-flotante-ayuda:hover {
    background-color: #004494; /* Color fijo para hover */
    transform: scale(1.1);
    cursor: pointer;
}

/* Iconografía (CSS PURE) */
.icono-persona {
    position: relative;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
}
.icono-persona::before { /* Cabeza */
    content: '';
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    background-color: var(--color-blanco);
    border-radius: 50%;
}
.icono-persona::after { /* Cuerpo */
    content: '';
    position: absolute;
    bottom: 0;
    width: 18px;
    height: 10px;
    background-color: var(--color-blanco);
    border-radius: 10px 10px 0 0;
}

/* Signo de interrogación */
.signo-pregunta {
    position: absolute;
    top: 8px;
    right: 10px;
    background-color: var(--color-acento); /* Usamos el color de acento */
    color: var(--color-texto);
    font-weight: bold;
    font-size: 12px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    text-align: center;
    line-height: 16px;
    border: 2px solid var(--color-primario);
}

body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1); 
}

/* ===========================================================
   FINAL FIX: Alertas de Stock en Todos los Modos
   =========================================================== */

/* --- 1. DEFAULT (LIGHT MODE) --- */
/* Fondos Pasteles Claros */
.personal-table tbody tr.stock-warning {
    background-color: #FFD2A8 !important; /* Naranja Pastel Claro */
}
.personal-table tbody tr.stock-critical {
    background-color: #F7CACA !important; /* Rojo Pastel Claro */
}


/* --- 2. DARK MODE OVERRIDES (Fondos Oscuros y Texto Blanco) --- */
body.dark-mode .personal-table tbody tr.stock-warning {
    /* Naranja/Marrón Oscuro y Desteñido */
    background-color: #996515 !important; 
}

body.dark-mode .personal-table tbody tr.stock-critical {
    /* Rojo Ladrillo Oscuro (Desteñido) */
    background-color: #6A0000 !important; 
}