*{box-sizing:border-box}
:root{--brand:#004080;--text:#222;--muted:#667085;--border:#cfd6e4;--bg:#f5f7fb}
.header{display:flex;align-items:center;gap:16px;padding:12px 20px;background:var(--brand);color:#fff}
.header.sticky{position:sticky;top:0;z-index:1000}
.logo{height:56px}
.titles{flex:1}
.titles h1{margin:0;font-size:1.4em}
.subtitle{margin:0;font-size:.9em;opacity:.9}
.searchbar{flex:1;max-width:320px}
.container{max-width:1100px;margin:18px auto;padding:18px;background:#fff;border-radius:12px;box-shadow:0 3px 10px rgba(0,0,0,.08)}
.controls{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.filters-row{display:flex;gap:10px;flex-wrap:wrap}
input,select,textarea,button{font-size:16px;padding:10px 12px;border:1px solid var(--border);border-radius:10px}
button{background:var(--brand);color:#fff;border:none;cursor:pointer}
button:hover{filter:brightness(1.05)}
.result{margin-top:12px;padding:14px;background:#fff;border:1px solid #e2e7f0;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.title{font-weight:700;font-size:16px;margin-bottom:6px}
.keywords{font-size:12px;color:#555}
.muted{color:var(--muted)}
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.admin-left .toolbar{display:flex;gap:8px;margin-bottom:8px}
.pdf-viewer{width:100%;height:70vh;border:1px solid var(--border);border-radius:10px}
.login-form{display:flex;gap:10px;flex-wrap:wrap}
.login-form input{flex:1 1 180px}
.actions{display:flex;gap:8px;margin-top:8px}
@media(max-width:900px){.admin-grid{grid-template-columns:1fr}.pdf-viewer{height:60vh}}
@media(max-width:600px){.titles h1{font-size:1.2em}.subtitle{font-size:.8em}}

/* Awesomplete style */
.awesomplete{width:100%}
.awesomplete > ul {
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  margin:0;
  padding:0;
  list-style:none;
  box-shadow:0 3px 6px rgba(0,0,0,.15);
  font-size:15px;
  max-height:220px;
  overflow-y:auto;
  z-index:9999;
}
.awesomplete > ul > li {
  padding:8px 12px;
  cursor:pointer;
}
.awesomplete > ul > li:hover,
.awesomplete > ul > li[aria-selected="true"] {
  background:var(--brand);
  color:#fff;
}
mark.highlight { background-color: yellow; font-weight: bold; }


/* === Mantenimiento additions === */
.searchbar { display:flex; align-items:center; flex-wrap:nowrap; gap:10px; }
.searchbar select, .searchbar input, .searchbar button, .searchbar label, .searchbar div { flex:0 0 auto; }
.btn-new { background-color:#28a745; color:#fff; }
.btn-logout { background-color:#dc3545; color:#fff; border:none; border-radius:4px; padding:6px 12px; cursor:pointer; font-size:14px; margin-left:15px; }
.btn-logout:hover { background-color:#c82333; }

/* Botón verde reutilizable */
.btn-success {
  background-color:#28a745;
  color:#fff;
  border:none;
  padding:8px 14px;
  border-radius:4px;
  cursor:pointer;
}
.btn-success:hover {
  background-color:#218838;
}

.edit-panel { position:fixed; top:0; right:-700px; width:600px; min-width:400px; max-width:900px; height:100%; background:#fff; box-shadow:-4px 0 8px rgba(0,0,0,0.3); display:flex; flex-direction:column; transition:right .3s ease; z-index:10000; padding:20px; }
.edit-panel.show { right:0; }
.edit-panel .panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.edit-panel .panel-body { flex:1; overflow-y:auto; }
.edit-panel label { display:block; margin-top:10px; font-weight:bold; }
.edit-panel input { width:100%; padding:6px; margin-top:4px; border:1px solid #ccc; border-radius:4px; }
.resize-handle { position:absolute; left:-5px; top:0; width:10px; height:100%; cursor:ew-resize; background:transparent; }


/* Alineación de botones en cabecera de mantenimiento */
.mant-header-actions {
  display: inline-flex;
  gap: 10px;
  margin-left: 20px;
  vertical-align: middle;
}


/* Tabs de navegación */
.tabs{
  display:flex; gap:.5rem; align-items:center;
  border-bottom:1px solid #ccc; margin:1rem 0;
  flex-wrap:wrap;
}
.tab{
  padding:.5rem .8rem;
  border:1px solid transparent;
  border-radius:.5rem .5rem 0 0;
  background:#f0f0f0;
  color:#333;
  text-decoration:none;
  font-weight:600;
}
.tab.is-active{
  background:#fff;
  border:1px solid #ccc;
  border-bottom:1px solid #fff;
}
.tab:focus{ outline:2px solid #333; outline-offset:2px; }
.tab-panel{ padding:1rem 0; }
.tab-panel[hidden]{ display:none !important; }
.tab-panel.is-visible{ display:block; }


/* ==== Navegación extra en header ==== */
.nav-extra {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.nav-extra .nav-btn {
  padding: .4rem .8rem;
  background: #f2f2f2;
  color: #333;
  border: 1px solid #ccc;
  border-radius: .4rem;
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
  transition: background .2s, color .2s;
}
.nav-extra .nav-btn:hover {
  background: #ddd;
  color: #000;
}

/* ==== Responsive: ajustar layout en móviles ==== */
@media (max-width: 768px) {
  .nav-extra {
    position: static;
    justify-content: center;
    margin-top: .5rem;
  }
  .search-container {
    display: flex;
    flex-direction: column;
  }
  .search-container select {
    margin-bottom: .5rem;
  }
  .search-container input[type="text"] {
    order: 2; /* mover el cuadro de búsqueda debajo del select */
    margin-top: .5rem;
  }
}


/* ==== Navegación extra en header (flex) ==== */
.header{display:flex;align-items:center;gap:16px; padding:12px 20px;}
.header .titles{flex:1}
.nav-extra {
  display:flex;
  gap:.5rem;
  margin-left:auto;
  flex-wrap:wrap;
}
.nav-extra .nav-btn, .nav-extra a {
  padding:.4rem .8rem;
  background:#f2f2f2;
  color:#333;
  border:1px solid #ccc;
  border-radius:.4rem;
  text-decoration:none;
  font-weight:600;
  font-size:.9rem;
  transition:background .2s, color .2s;
}
.nav-extra .nav-btn:hover, .nav-extra a:hover { background:#ddd; color:#000; }

/* ==== Barras de búsqueda: mejorar en móvil ==== */
.controls .searchbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
@media (max-width: 768px){
  .header{flex-direction:column; align-items:flex-start; gap:8px;}
  .nav-extra{margin-left:0;}
  .controls .searchbar{flex-direction:column; align-items:stretch;}
  #tipoFiltro, #searchBox{width:100%; max-width:100%;}
}


/* ==== Estilo tabla Junta Ejecutiva ==== */
table.junta {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
table.junta td {
  border: 1px solid #ccc;
  padding: 6px 10px;
}
table.junta tr:nth-child(odd) {
  background: #f9f9f9;
}
table.junta tr:nth-child(even) {
  background: #fff;
}

/* ==== Ajustes responsive tabla Junta ==== */
@media (max-width: 600px) {
  table.junta td {
    font-size: .85rem;
    padding: 4px 6px;
    word-wrap: break-word;
    white-space: normal;
  }
  table.junta {
    font-size: .9rem;
  }
}


/* Tablas responsive en Autores */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 20px;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95em;
}
table td {
  border: 1px solid #ccc;
  padding: 8px;
}
table tr:nth-child(even) {
  background-color: #eaeaea; /* gris más oscuro */
}

/* Leyenda institucional */
.leyenda {
  font-size: 0.9em;
  color: #555;
  text-align: center;
  margin-bottom: 20px;
}

/* Botón volver al buscador */
.back-button {
  display: inline-block;
  padding: 6px 12px;
  background-color: #004d40;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9em;
}
.back-button:hover {
  background-color: #00695c;
}


/* Estilo para el botón activo */
.btn-white.active {
    background-color: #e0e0e0; /* gris suave */
    color: #000;
    font-weight: bold;
    border: 2px solid #999;
}

/* ==== Estilos para los enlaces del nav ==== */
nav.nav-extra {
    margin-top: 10px;
    text-align: center; /* centra los botones dentro del header */
}

nav.nav-extra a.btn {
    display: inline-block;
    margin: 0 8px;
    padding: 6px 14px;
    border-radius: 6px;
    text-decoration: none;
    background-color: #fff;
    color: #003366; /* azul institucional para el texto */
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

nav.nav-extra a.btn:hover {
    background-color: #e6e6e6; /* gris claro al pasar el mouse */
}

/* Botón activo */
nav.nav-extra a.active {
    background-color: #0066cc; /* azul activo */
    color: #fff !important;
    border: 2px solid #004080;
    font-weight: bold;
}


/* --- Ajuste para scroll con header fijo --- */
section {
  scroll-margin-top: 100px; /* altura aproximada del header */
}

  text-align: center;
  font-size: 12px;
  background-color: #004080; /* azul institucional */
  color: white;
  padding: 5px;
  position: fixed;
  bottom: 0;
  width: 100%;
}



  text-align: center;
  font-size: 12px;
  background-color: #004080; /* azul institucional */
  color: white;
  padding: 10px;
  margin-top: 40px;
  width: 100%;
}
  color: white;
  text-decoration: underline;
}

/* --- Footer institucional corregido --- */
  text-align: center;
  font-size: 12px;
  background-color: #004080; /* azul institucional */
  color: white;
  padding: 10px;
  margin-top: 40px;
  width: 100%;
  position: relative; /* no fijo */
  left: 0;
}
  color: white;
  text-decoration: underline;
}

/* --- Footer institucional igual que header --- */
  background: var(--brand); /* igual que el header */
  color: #fff;
  text-align: center;
  font-size: 12px;
  padding: 10px;
  margin-top: 40px;
  width: 100%;
  position: relative;
  left: 0;
}
  color: #fff;
  text-decoration: underline;
}

/* --- Footer institucional igual al header --- */
  background-color: #004080; /* mismo color que header */
  color: #fff;
  text-align: center;
  font-size: 12px;
  padding: 10px;
  margin-top: 40px;
  width: 100%;
}
  color: #fff;
  text-decoration: underline;
}
.volver-inicio {
  text-align: center;
  margin-top: 15px;
}
.volver-inicio a {
  color: #004080;
  font-weight: bold;
  text-decoration: none;
}
.volver-inicio a:hover {
  text-decoration: underline;
}

/* --- Footer institucional corregido y forzado --- */
.footer {
  background-color: #004080 !important; /* azul institucional */
  color: #fff !important;
  text-align: center;
  font-size: 12px;
  padding: 10px;
  margin-top: 40px;
  width: 100%;
}

.footer a {
  color: #fff !important; /* blanco visible sobre azul */
  text-decoration: underline;
  font-weight: bold;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
}


/* Estilo para el textarea de Resumen Ejecutivo */
#campoResumen {
  width: 100%;
  min-height: 80px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1rem;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: none; /* desactivamos resize manual */
  overflow-y: hidden; /* sin scroll vertical, crece automáticamente */
}


/* Hotfix: panel de edición en mantenimiento */
.edit-panel{
  position: fixed; top: 0; right: -700px; width: 600px; height: 100vh;
  background: #fff; border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  transition: right .3s ease; z-index: 10000; padding: 20px;
  box-shadow: -2px 0 8px rgba(0,0,0,.1);
}
.edit-panel.show{ right: 0; }
.resize-handle{ position: absolute; left: -6px; top: 0; width: 6px; height: 100%; cursor: ew-resize; }
.edit-btn{ margin-top: 8px; }


/* ==== Feedback visual al presionar botones ==== */
button:active, 
.btn:active {
  transform: scale(0.96);       /* efecto hundido */
  filter: brightness(0.9);      /* más oscuro */
}

.btn-ai:active       { background-color: #0d5c63; }
.btn-edit:active     { background-color: #1c7430; }
.btn-eliminar:active { background-color: #a71d2a; }
.btn-success:active  { background-color: #1c7430; }


/* Panel lateral para Nuevo Documento */
#newDocPanel { right:-700px; }
#newDocPanel.show { right:0; }

/* =============================================== */
/* ===== ESTILOS RESPONSIVE PARA PANELES ===== */
/* =============================================== */

/* Aplica estos estilos solo en pantallas de 768px de ancho o menos (tablets y celulares) */
@media (max-width: 768px) {
  
  .edit-panel {
    /* El panel ocupará toda la pantalla */
    width: 100%;
    max-width: 100%;
    min-width: 100%;

    /* Ajustamos la posición inicial fuera de la pantalla */
    right: -100%; 
    
    /* Quitamos estilos que no se verán en pantalla completa */
    box-shadow: none;
    border-left: none;
    
    /* Aseguramos que el padding no desborde el panel */
    box-sizing: border-box; 
  }

  /* La clase .show sigue funcionando para mostrar el panel */
  .edit-panel.show {
    right: 0;
  }
  
  /* Ocultamos el manejador para redimensionar en móviles, ya que no tiene sentido */
  .resize-handle {
    display: none;
  }
}