/* =========================
   Base & tokens
========================= */
:root {
  --bg: #f9f9f9;
  --text: #333;
  --brand: #2A4747;
  --brand-2: #439775;
  --brand-3: #4CAF50;
  --brand-3-dark: #45a049;
  --table-border: #2A4747;
  --danger: #b52222;
  --white: #fff;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

/* Contenedor genérico */
.container {
  width: 100% !important;
  min-width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 10px 16px 0 16px;
}

/* =========================
   Header / Navbar
========================= */
.header {
  width: 100%;
  min-height: 60px;
  background: var(--brand);
  display: flex;
  align-items: center;
  padding: 0 15px;
  gap: 8px;
}
.header .logo {
  width: 45px; height: 45px; flex: 0 0 45px;
  background: url('../img/logo.png') center/contain no-repeat;
  border-radius: 6px;
}
.header .items-content {
  margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.header .item { display: flex; align-items: center; gap: 8px; padding: 8px 6px; white-space: nowrap; }
.header .item a, .header .item label { color: #f9f9f9; }
.header .item:hover { cursor: pointer; }

.icon-link {
  text-decoration: none !important;
  color: white !important;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
}
.icon-link:hover { opacity: .8; }

/* =========================
   Tipografía & Botones
========================= */
strong { font-weight: 700; color: #333; }

button {
  padding: 8px 15px;
  background: var(--brand-3);
  color: #fff;
  border: 0;
  font-size: 14px;
  cursor: pointer;
  border-radius: 6px;
  transition: filter .2s ease;
}
button:hover { filter: brightness(.95); }
button:disabled { opacity: .6; cursor: not-allowed; }

.red { color: var(--danger); }

/* =========================
   Inputs / Selects
========================= */
label[for='sala'] {
  font-weight: 700; font-size: 16px; margin-right: 10px;
}
#cursos, #profesor, .search-input {
  padding: 8px; font-size: 16px; border: 2px solid var(--brand);
  border-radius: 6px; background: #f9f9f9;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#cursos:hover, #profesor:hover, .search-input:hover { border-color: var(--brand-3-dark); }
#cursos:focus, #profesor:focus, .search-input:focus {
  outline: none; border-color: var(--brand-3);
  box-shadow: 0 0 0 3px rgba(76, 175, 80, .15);
}

/* =========================
   Tabla horario
========================= */
.tabla-scroll { width: 100%; overflow: auto; }

#horarioSemanal {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  margin-bottom: 20px;
  table-layout: fixed;
  border: 3px solid var(--table-border);
  min-width: 1100px;
}

#horarioSemanal thead th, #horarioSemanal tbody td {
  border: 1px solid var(--table-border);
}

#horarioSemanal thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--brand-2); color: #fff;
  font-size: 16px; padding: 6px; text-align: center;
}

#horarioSemanal tbody td {
  padding: 6px; text-align: center; vertical-align: middle;
  font-size: 14px; word-wrap: break-word; overflow-wrap: anywhere;
}

/* 1ª columna (horas) */
#horarioSemanal thead th:first-child,
#horarioSemanal tbody td:first-child {
  width: 140px; white-space: nowrap;
}

/* Celdas vacías */
td:empty { background: #fff; }

/* =========================
   Vistas por día
========================= */
.dia-container {
  margin-bottom: 40px; background: #fff; padding: 15px;
  border-radius: 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
}
.dia-container h2 { text-transform: capitalize; color: #2a5d9f; margin-bottom: 10px; }
.dia-container table { width: 100%; border-collapse: collapse; }
.dia-container th, .dia-container td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #ddd; }
.dia-container th { background: #e6f0ff; color: #2a5d9f; }

/* Stacked en móvil */
@media (max-width: 768px) {
  .dia-container table, .dia-container thead, .dia-container tbody,
  .dia-container th, .dia-container td, .dia-container tr { display: block; }
  .dia-container thead { display: none; }
  .dia-container td { border: none; position: relative; padding-left: 48%; margin-bottom: 8px; }
  .dia-container td::before {
    content: attr(data-label); position: absolute; left: 10px; top: 0; font-weight: 700; color: #555;
  }
}

/* =========================
   Modales / Popups
========================= */
.modal, .overlay, .popup, .modaliniciosesion {
  display: none; position: fixed; inset: 0; z-index: 1000;
}
.overlay { background: rgba(0,0,0,.5); z-index: 999; }
.modal.visible, .popup.visible, .modaliniciosesion.visible {
  display: flex; align-items: center; justify-content: center;
}
.modal-content, .pop-content, .modaliniciosesion-content {
  width: 90%; max-width: 500px; background: #fff;
  border: 1px solid #888; border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,.15); padding: 20px;
}
.close {
  color: #777; font-size: 28px; font-weight: 700;
  cursor: pointer; border: 0; background: transparent; float: right;
}
.close:hover { color: #333; }

/* Formularios modal */
form input, form select {
  width: 100%; padding: 10px; margin-bottom: 10px;
  border: 1px solid #ccc; border-radius: 6px;
}
form button { width: auto; }

.botonera {
  display: flex; gap: 10px; justify-content: space-between;
/* Bootstrap ya se importa vía CDN en el <head> de cada vista. Elimina el import directo si existe. */
}
.botonera-elimnar { display: flex; justify-content: center; width: 100%; }
#btnEliminar { width: min(220px, 100%); }
.inputNombre { width: 100%; height: 38px; }
.subtitulo { margin: 10px 0 6px 0; font-family: 'Fredoka', sans-serif; }

/* =========================
   Responsive global
========================= */
@media (max-width: 1200px) {
  #horarioSemanal { font-size: 12px; }
  #horarioSemanal thead th { font-size: 14px; padding: 4px; }
  #horarioSemanal tbody td { font-size: 12px; padding: 4px; }
}
@media (max-width: 768px) {
  .header { padding: 10px; min-height: auto; }
  .header .items-content { justify-content: center; gap: 10px; }
  .header .item { margin: 4px 0; }
  .header .item a { display: flex; align-items: center; gap: 6px; }
  .header .item i, .header .item svg { width: 20px; height: 20px; }

  .login-container { width: 95%; margin: 10px; }

  .modal-content, .pop-content, .modaliniciosesion-content {
    width: 95%; margin: 10px auto;
  }
}
@media (max-width: 480px) {
  .header { padding: 6px; }
  .header .items-content { flex-direction: column; width: 100%; }
  .header .item { width: 100%; justify-content: center; padding: 6px; }

  #cursos, .search-input { width: 100%; margin: 6px 0; max-width: 320px; }

  #horarioSemanal { font-size: 11px; }
  #horarioSemanal thead th { font-size: 12px; padding: 3px; }
  #horarioSemanal tbody td { font-size: 11px; padding: 3px; }

  .modal-content, .pop-content, .modaliniciosesion-content { padding: 15px; }

  .botonera { flex-direction: column; }
  .botonera button { width: 100%; }
}

/* =========================
   Impresión
========================= */
@media print {
  body {
    font-family: Arial, sans-serif;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    min-height: 100vh; width: 100%; margin: 0;
  }
  @page { size: A4 landscape; margin: 1cm; }

  #sala, #labelSala, #cursos, #config-icon,
  .search-input, .print-style, .header, .navbar { display: none !important; }

  .tabla-scroll { overflow: visible !important; border: none !important; width: 100%; height: auto; }
  .container { display: block !important; max-width: none !important; padding: 0; width: 100%; }

  #horarioSemanal thead th { position: static; }
  #horarioSemanal { min-width: auto; width: 100%; border: 2px solid #000; }

  #horarioSemanal th, #horarioSemanal td {
    page-break-inside: avoid;
    padding: 5px; font-size: 10px; text-align: center; vertical-align: middle;
    word-wrap: break-word; border: 1px solid #000;
  }
}

/* =========================
   Celdas especiales (JS sin inline)
========================= */
.hora-cell { background: var(--brand-2); color: #fff; font-weight: 600; }
td.g-left  { border-left: 3px solid #000 !important; }
td.g-right { border-right: 3px solid #000 !important; }
td.ocupado.ambos { background: #ffe6e6; }
td.ocupado.g1    { background: #e6f7ff; }
td.ocupado.g2    { background: #ffffe6; }
td.free { background: #fff; }

/* =========================
   Admin mínimos / acciones en celda / modal centrado
========================= */
.btn-alt { background: #61D095; color: #2A4747; }
.btn-alt:hover { filter: brightness(.95); }

.admin-title { margin-top: 10px; }

/* Botón fantasma para acciones */
.btn-ghost {
  background: transparent; border: 0; padding: 4px 6px; line-height: 1;
  border-radius: 6px; cursor: pointer;
}
.btn-ghost:hover { background: rgba(0,0,0,.06); }

/* Cuerpo de celda con acciones */
.cell-body {
  display: flex; align-items: center; text-align: center; justify-content: space-between; gap: 8px;
}
.cell-actions { flex: 0 0 auto; display: flex; gap: 6px; }

/* Modal centrado (reemplaza posiciones fijas) */
.modal {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.4);
  align-items: center; justify-content: center;
}
.modal-content {
  position: static;
  width: min(500px, 95%); max-height: 90vh; overflow: auto;
  background: #fff; border: 1px solid #888; border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,.15); padding: 20px;
}

/* === Compactar acciones dentro de la celda (overlay) === */
#horarioSemanal td.ocupado .cell-body{
  position: relative;
  display: block;            /* deja de usar flex para que el texto fluya normal */
  padding-right: 72px;       /* espacio para los botones sin empujar el contenido */
  line-height: 1.2;          /* un poco más compacto */
}

/* Acciones arriba a la derecha, fuera del flujo de la celda */
#horarioSemanal td .cell-actions{
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  opacity: 0.8;
  transition: opacity .15s ease, transform .15s ease;
}

#horarioSemanal td:hover .cell-actions{
  opacity: 1;
}

/* Botón fantasma reducido */
.btn-ghost{
  background: transparent;
  border: 0;
  padding: 4px;
  line-height: 1;
  border-radius: 6px;
  cursor: pointer;
}
.btn-ghost:hover{
  background: rgba(0,0,0,.06);
}

/* Íconos SIEMPRE en negro (incluye el de eliminar) */
.cell-actions .bi{
  color: #000 !important;
  font-size: 16px;
}

/* Mejora de alturas: que el texto no “salte” */
#horarioSemanal tbody td{
  vertical-align: middle;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* === Celda: contenido en columna, acciones abajo === */
#horarioSemanal td.ocupado .cell-body{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 0;          /* ya no reservamos espacio lateral */
}

#horarioSemanal td .cell-title{
  line-height: 1.2;
}

#horarioSemanal td .cell-actions{
  position: static;          /* sin overlay */
  top: auto; right: auto;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
  opacity: 1;                /* siempre visibles */
}

/* Botón de acción compacto + íconos negros */
.btn-ghost{
  background: transparent;
  border: 0;
  padding: 6px;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
}
.btn-ghost:hover{ background: rgba(0,0,0,.06); }

.cell-actions .bi{
  color: #000 !important;
  font-size: 16px;
}


/* ===== Mobile tweaks: centrar contenido y acciones ===== */
@media (max-width: 768px) {
  /* Centrar todo el contenido dentro de la celda */
  #horarioSemanal td.ocupado .cell-body{
    align-items: center;
    text-align: center;
    gap: 8px;                /* un poquito más de aire entre bloques */
  }

  #horarioSemanal td .cell-title{
    text-align: center;
  }

  /* Acciones centradas y con buen espacio para tocar */
  #horarioSemanal td .cell-actions{
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;         /* si no entra en una línea, que salte a dos */
    margin-top: 6px;
  }

  /* Botones un pelín más grandes en mobile */
  .btn-ghost{
    padding: 8px;            /* mayor área táctil */
    border-radius: 10px;
  }

  /* Íconos un poquito más grandes en mobile */
  .cell-actions .bi{
    font-size: 18px;
  }
}

/* (opcional) foco accesible en los botones de acción */
.btn-ghost:focus{
  outline: 2px solid rgba(0,0,0,.4);
  outline-offset: 2px;
}


/* Modal de suplentes: centrar y usar el mismo look */
#modalSuplenteTabla.modal{
  display: none;                 /* el JS lo pone en 'flex' al abrir */
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
#modalSuplenteTabla .modal-content{
  position: static !important;   /* anula el top/right fijo del otro modal */
  width: 90%;
  max-width: 520px;
  margin: 0 16px;
  background: #fff;
  border: 1px solid #888;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
  padding: 20px;
}
#modalSuplenteTabla .close{
  position: absolute;
  right: 12px;
  top: 8px;
  font-size: 28px;
  color: #777;
  background: transparent;
  border: 0;
  cursor: pointer;
}
#modalSuplenteTabla .close:hover{ color:#333; }


/* Centro y look del popup (coincide con tu línea de estilos) */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 999;
}
.overlay.visible { display: block; }

.popup {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 90%;
  max-width: 500px;
  background: #fff;
  border: 1px solid #888;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
  padding: 20px;
  z-index: 1000;
}
.popup.visible { display: block; }

.popup select {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: solid 1px #48BF84;
}
.botonera {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px;
}

/* =========================
   Modales unificados (popup / desasignar / suplente)
========================= */

/* Contenedor modal centrado (usa tus tokens) */
.modal,
#modalSuplenteTabla,
.popup {
  /* el JS controla display; acá solo estilos */
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}

/* Overlay ya lo tenés, aseguro tono y z-index */
.overlay {
  background: rgba(0,0,0,.5);
  z-index: 999;
}

/* Caja del modal (mismo look en todos) */
.modal-content,
#modalSuplenteTabla .modal-content,
.popup {
  position: static !important;             /* evita quedar “arriba a la derecha” */
  width: 92%;
  max-width: 560px;
  background: var(--white);
  border: 1px solid #888;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
  padding: 20px;
  max-height: 90vh;                         /* evita que “cuelgue” fuera de pantalla */
  overflow: auto;                           /* scroll interno si hace falta */
}

/* Título del modal */
.modal-content .title,
#modalSuplenteTabla .title,
.popup h1 {
  font-size: 20px;
  margin: 0 0 12px 0;
  color: var(--text);
}

/* Cerrar (X) consistente */
.modal-content .close,
#modalSuplenteTabla .close {
  position: absolute;
  top: 10px; right: 12px;
  background: transparent;
  border: 0;
  font-size: 28px;
  color: #777;
  cursor: pointer;
}
.modal-content .close:hover,
#modalSuplenteTabla .close:hover { color: #333; }

/* Form layout limpio */
.modal-content form,
#modalSuplenteTabla form,
.popup form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Grid 2 cols para campos (switch a 1 col en mobile) */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 768px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* Grupo de campo */
.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #444;
}
.form-group input,
.form-group select,
.modal-content input,
.modal-content select,
.popup select,
.popup input {
  width: 100%;
  padding: 10px;
  border: 2px solid var(--brand);
  border-radius: 8px;
  background: #f9f9f9;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-group input:focus,
.form-group select:focus,
.popup select:focus,
.popup input:focus {
  outline: none;
  border-color: var(--brand-3);
  box-shadow: 0 0 0 3px rgba(76, 175, 80, .15);
}

/* Botonera prolija */
.botonera {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .botonera { justify-content: center; }
  .botonera button { min-width: 140px; }
}

/* Ajustes específicos del popup “Asignar” para que nada cuelgue */
#popup .subtitulo { margin: 8px 0 4px; }
#popup select { margin-bottom: 6px; }

/* Un poco de aire entre bloques de contenido en las celdas de la tabla */
#horarioSemanal td.ocupado .cell-body{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#horarioSemanal td .cell-actions{
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-ghost{
  background: transparent;
  border: 0;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.btn-ghost:hover{ background: rgba(0,0,0,.06); }
.cell-actions .bi{ color: #000 !important; font-size:16px; }


/* Contenedor modal (todos iguales) */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;                 /* el JS lo pone en 'flex' al abrir */
  align-items: center;
  justify-content: center;
}

/* Caja del modal uniforme */
.modal-content {
  position: static !important;   /* evita quedar "arriba a la derecha" */
  width: 92%;
  max-width: 560px;
  background: var(--white);
  border: 1px solid #888;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
  padding: 20px;
  max-height: 90vh;              /* si hay mucho contenido, scroll interno */
  overflow: auto;
}

/* Títulos, cierre y formularios ya los definimos antes, pero reafirmo por si hay estilos viejos */
.modal-content .title { font-size: 20px; margin: 0 0 12px; color: var(--text); }
.modal-content .close {
  position: absolute; top: 10px; right: 12px;
  background: transparent; border: 0; font-size: 28px;
  color: #777; cursor: pointer;
}
.modal-content .close:hover { color: #333; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 768px){ .form-grid { grid-template-columns: 1fr; } }

.form-group label { display: block; font-weight: 600; margin-bottom: 6px; color:#444; }
.form-group input, .form-group select {
  width: 100%; padding: 10px;
  border: 2px solid var(--brand); border-radius: 8px; background: #f9f9f9;
  transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus, .form-group select:focus {
  outline: none; border-color: var(--brand-3);
  box-shadow: 0 0 0 3px rgba(76,175,80,.15);
}

/* Overlay (ya lo tenías) */
.overlay { background: rgba(0,0,0,.5); z-index: 999; }
.overlay.visible { display: block; }

/* IMPORTANTE: anula estilos antiguos que usaban .popup como contenedor */
#popup.popup { all: unset; }              /* si por error quedó la clase 'popup', resetea */
#popup.visible { display: flex !important; }