/* Estilos simples, limpios y responsive */
:root{
  --max-width: 1000px;
  --dashboard-max-width: 1400px;
  --gap: 1rem;
  --bg: #ffffff;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-contrast: #ffffff;
  --border: #e5e7eb;

  /* color de fondo del header y de los encabezados de tablas administrativas */
  --header-bg: #29473f;

  /* colores compartidos para las opciones de menú del header */
  --header-menu-color: #111827;
  --header-menu-hover-bg: #f3f4f6;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;
  line-height:1.5;
  color:#111827;
  background:linear-gradient(180deg,#f8fafc,#fff);
}
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:1rem;
}

/* contenedor específico para dashboards más anchos */
.dashboard-container{
  max-width: var(--dashboard-max-width);
  margin: 0 auto;
  padding: 1rem;
}
.site-header{
  border-bottom:1px solid var(--border);
  background: var(--header-bg);
  color:#ffffff;
  max-height:60px;
  /* necesario para que el menú desplegable pueda sobresalir */
  overflow:visible;
  position:relative; /* establece un contexto de apilamiento para el dropdown */
  z-index: 1000;
}
.site-header .container{
  padding-top:0;
  padding-bottom:0;
  display:flex;
  align-items:center;
  height:60px;
}

/* acciones de la cabecera (login/registro) */
.header-actions{
  margin-left:auto;
  display:flex;
  gap:.5rem;
}
/* el botón de "Inicia sesión" utiliza .btn-secondary en el header, pero ahí
   queremos que se vea igual que el primario. En su estado normal no debe llevar
   el borde gris ni el fondo claro. */
.header-actions .btn-secondary{
  background: #29473f; /* mismo color que .btn-primary */
  color: var(--accent-contrast);
  border: 0;
}
.header-actions button{
  transition:transform .2s ease, background-color .2s ease, color .2s ease;
}
/* en hover ambos botones muestran el recuadro gris con fondo claro en lugar del
   acento azul que desentonaba */
.header-actions button:hover{
  transform:translateY(-2px);
  background-color: var(--header-menu-hover-bg);
  color: var(--header-menu-color);
}

/* navegación principal cuando el usuario está logueado */
.header-nav {
  margin-left:auto;
  display:flex;
  gap:1rem;
}
.header-nav a {
  color: var(--header-menu-color);
  text-decoration: none;
  padding: .5rem .75rem;
  border-radius:6px;
  font-weight:600;
}
.header-nav a:hover {
  background: var(--header-menu-hover-bg);
  color: var(--header-menu-color);
}

/* nueva estructura de header para responsive */
.app-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* asegurar que tanto enlaces como botones del header compartan estilo */
.header-nav button,
.header-nav a {
  /* texto blanco para destacar sobre el fondo oscuro del header */
  color: #ffffff;
  background: none;
  border: none;
  padding: .5rem .75rem;
  border-radius:6px;
  font-weight:600;
  cursor: pointer;
  text-decoration: none;
}

.header-nav button:hover,
.header-nav a:hover {
  background: var(--header-menu-hover-bg);
  /* al hacer hover invertimos el color para mantener contraste legible */
  color: var(--header-menu-color);
}

/* hamburguesa */
.hamburger {
  display: none;
  font-size: 22px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent-contrast);
}

@media (max-width: 768px) {
  .header-nav {
    position: absolute;
    top: 60px;
    right: 10px;
    background: #29473f; /* mantengo fondo oscuro para no romper tema */
    border: 1px solid var(--border);
    border-radius: 8px;
    flex-direction: column;
    padding: 10px;
    display: none;
    z-index: 1001;
  }

  /* contraste en el menú desplegable móvil */
  .header-nav button,
  .header-nav a {
    color: #ffffff;
  }

  .header-nav.active {
    display: flex;
  }

  .hamburger {
    display: block;
  }
}

/* perfil redondo y menú desplegable */
.profile-menu{
  position:relative;
}
.profile-button{
  width:40px;
  height:40px;
  border:none;
  background:none;
  padding:0;
  border-radius:50%;
  cursor:pointer;
  color:var(--accent-contrast);
  display:flex;
  align-items:center;
  justify-content:center;
}
.profile-button:focus{
  outline:3px solid rgba(255,255,255,.5);
}
.profile-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:50%; /* recortar la imagen al círculo del botón */
}
.profile-dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 5px);
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
  display:none;
  min-width:150px;
  z-index:1000;
}
.profile-dropdown.visible{
  display:block;
}
.profile-dropdown a,
.profile-dropdown button{
  display:block;
  width:100%;
  padding:.5rem 1rem;
  text-align:left;
  background:none;
  border:none;
  color:var(--header-menu-color);
  text-decoration:none;
  cursor:pointer;

  /* uniformizar tipografía */
  font-family:inherit;
  font-size:1rem;
  line-height:1.4;
}
.profile-dropdown a:hover,
.profile-dropdown button:hover{
  background:var(--header-menu-hover-bg);
  color:var(--header-menu-color);
  /* evitar que el botón se desplace como otros botones del header */
  transform: none;
}

.header-banner{
  height: 60px;
  width: auto;
}
.h1, h1{margin:0 0 .25rem 0}
.lead{margin:0;color:#ffffff(--muted)}
.form-section, .result-section{margin-top:1.25rem}
.form{background:var(--bg);border:1px solid var(--border);padding:1rem;border-radius:8px}
fieldset{border:none;padding:0;margin:0}
legend{font-weight:600;margin-bottom:.5rem}
.form-row{display:flex;flex-direction:column;margin-bottom:.75rem}
label{font-weight:600;margin-bottom:.25rem}
.required{color:#dc2626;margin-left:.25rem}
input[type="text"],input[type="email"],input[type="password"],input[type="date"],input[type="url"], textarea, select {
  padding:.5rem .6rem;
  border:1px solid var(--border);
  border-radius:6px;
  font-size:1rem;
  width:100%;
  /* mismo comportamiento de tipografía y tamaño que los inputs de texto */
  font-family:inherit;
}
input:focus, textarea:focus, select:focus{
  outline:3px solid rgba(37,99,235,.15);
  border-color:var(--accent);
}
.form-actions{display:flex;justify-content:flex-start;margin-top:.5rem}
.btn-primary, .btn-secondary{padding:.5rem .75rem;border-radius:6px;border:0;cursor:pointer;font-weight:600}
.btn-primary{background:#29473f;color:var(--accent-contrast)}
.btn-primary:focus{outline:3px solid rgba(41,71,63,.2)}
.btn-secondary{background:#f3f4f6;color:#111827;border:1px solid var(--border)}

.welcome{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.welcome-img{max-height:90px;width:auto;display:block}
.welcome-text{margin:0;font-size:1rem;line-height:1.4;font-weight:600;text-align: justify;}

@media (max-width: 639px) {
  .welcome{flex-direction:column;align-items:center;text-align:center;}
  .welcome-img{max-height:150px;margin-bottom:0.75rem;}
  .welcome-text{text-align:center;}
}

.result-card{margin-top:.5rem;padding:1rem;border-radius:8px;background:#fff;border:1px solid var(--border)}
.reference{min-height:48px;padding:.25rem;color:#111827}
.result-actions{display:flex;gap:.5rem;align-items:center;margin-top:.5rem}
.notice{background:#fff4e5;border-radius:6px;padding:.5rem;margin-top:.5rem;border:1px solid #fde3b7;color:#92400e}
.site-footer{border-top:1px solid var(--border);margin-top:1.5rem;padding:1rem 0;color:var(--muted);font-size:.9rem;text-align:center}
@media (min-width:640px){
  .form-row{flex-direction:row;gap:1rem;align-items:center}
  .form-row label{width:220px;margin-bottom:0}
  .form-row input{flex:1}
  .form-row textarea{flex:1}
  .form-row select{flex:1}
}

/* componentes nuevos para dashboard y administración */
.dashboard-cards {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.dashboard-cards .card {
  background: #fff;
  border: 1px solid var(--border);
  padding: 1rem;
  border-radius: 8px;
  flex: 1 1 150px;
}

/* estilos comunes para tablas administrativas */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.admin-table thead {
  /* utilizar el mismo color del header principal para coherencia */
  background-color: var(--header-bg);
  color: var(--accent-contrast);
}
/* encabezados centrados */
.admin-table thead th {
  text-align: center;
}
.admin-table tbody tr:nth-child(odd) {
  background-color: #f9fafb;
}
.admin-table tbody tr:hover {
  background-color: #f1f5f9;
}
.admin-table th,
.admin-table td {
  border: 1px solid var(--border);
  padding: .5rem .75rem;
  text-align: left;
}

/* selects dentro de tablas administrativas (por ej. rol) */
.admin-table select {
  padding: .25rem .4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.9rem;
  background: #fff;
}

/* reutilizar mismo estilo para los filtros del historial global */
#history-filters select {
  padding: .25rem .4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.9rem;
  background: #fff;
}

/* responsividad y tamaño para pantallas pequeñas */
@media (max-width: 640px) {
  .admin-table {
    font-size: 0.8rem;
  }
  .admin-table th,
  .admin-table td {
    padding: .4rem .5rem;
  }
}

/* contenedor para evitar overflow horizontal */
.table-responsive {
  overflow-x: auto;
}

#filters,
.filters {
  margin-bottom: 1rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
#filters label,
.filters label {
  display: flex;
  flex-direction: column;
  font-weight: 600;
}

/* entradas y selects de los filtros administrativos */
.filters input[type="text"],
.filters select {
  padding: .5rem .6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
}

/* clases de color según el modelo */
.model-chatgpt { color: green; font-weight:600; }
.model-gemini { color: blue; font-weight:600; }
.model-claude { color: purple; font-weight:600; }

/* clase específica para el consentimiento de privacidad en registro */
.form-row.privacy-consent {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.form-row.privacy-consent label {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 1 auto !important;
}

.form-row.privacy-consent input[type="checkbox"] {
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* modal simple para mostrar detalles de cita */
.history-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.history-modal {
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  max-width: 90%;
  max-height: 90%;
  overflow-y: auto;
  position: relative;
}
.history-modal .close-modal {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* estilo de módulos administrativos (contener cada sección) */
.admin-module {
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  /* reducir espacio vertical y dar más espacio horizontal en escritorio */
  padding: 10px 20px;
  margin-top: 30px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  /* permitir que el módulo se ensanche hasta el 80% de la ventana y centrarse */
  max-width: 80vw;
  margin-left: auto;
  margin-right: auto;
}
.admin-module-header {
  margin-bottom: 8px; /* menos espacio debajo del encabezado */
  border-bottom: 1px solid #eee;
  padding-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Encabezados dentro de módulos no deberían tener márgenes extra */
.admin-module-header h2,
.admin-module-header h3 {
  margin: 0;
  padding: 0;
}

/* en pantallas grandes damos más padding horizontal para evitar que el contenido se amontone */
@media (min-width: 1024px) {
  .admin-module {
    padding: 15px 40px;
  }
}

/* espacio antes del módulo de historial global */
#global-history-module {
  margin-top: 2rem;
}

/* filtros de historial global: separa los elementos y añade margen inferior */
#history-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; /* espacio entre input y selects */
  margin-bottom: 1rem; /* distancia respecto a las métricas */
}
#history-filters input,
#history-filters select {
  /* permitir que los controles no se agrupen demasiado en pantallas pequeñas */
  flex: 1 1 auto;
  min-width: 120px;
}

/* separar un poco las métricas que aparecen debajo de los filtros */
#history-summary {
  margin-top: 1rem;
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* spacing for historial entries */
.citation-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem; /* separa cada entrada */
}
.citation-extra {
  font-size: 0.9rem;
  margin: 0.5rem 0;
  color: var(--muted);
  word-break: break-word;
}

/* estilo Markdown para historial IA */
.markdown-body {
  margin: 0.35rem 0;
  color: #111827;
  font-size: 0.95rem;
  line-height: 1.5;
  /* no pre-wrap para evitar dobles espacios en párrafos generados por el <p> implícito de markdown */
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  margin: 0.6rem 0 0.35rem;
  font-weight: 700;
}
.markdown-body p {
  margin: 0.3rem 0;
}
.markdown-body ul,
.markdown-body ol {
  margin: 0.5rem 0 0.5rem 1.2rem;
  padding-left: 0.4rem;
}
.markdown-body strong {
  font-weight: 700;
}
.historial-texto {
  border-left: 2px solid #e5e7eb;
  padding-left: 0.75rem;
  margin-top: 0.35rem;
}