/* ==========================================================================
   REDISEÑO 2026 — EEST Nº1 "Raúl Scalabrini Ortiz"
   --------------------------------------------------------------------------
   Hoja de estilos de modernización. Se carga DESPUÉS del resto de los CSS,
   por lo que sobrescribe el diseño anterior sin tocar el HTML/PHP.
   Para revertir: quitar el <link> de rediseno.css en las páginas .php/.html.
   Todos los colores se controlan con las variables de :root (abajo).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Paleta institucional (azul técnico + acento naranja) */
  --azul-900: #0a2540;   /* navy profundo  */
  --azul-800: #0d3a66;
  --azul-700: #11487f;
  --azul-600: #1565c0;   /* azul primario  */
  --cyan-500: #00b4c4;   /* acento frío    */
  --accent:   #ff7a18;   /* acento cálido (energía técnica) */
  --accent-2: #2ecc71;   /* verde éxito    */
  --danger:   #e63950;

  --texto:    #1f2a37;
  --texto-2:  #5b6b7b;
  --bg:       #f4f7fb;
  --bg-card:  #ffffff;
  --borde:    #e3e9f0;

  --sombra-sm: 0 1px 3px rgba(10,37,64,.08), 0 1px 2px rgba(10,37,64,.06);
  --sombra-md: 0 6px 18px rgba(10,37,64,.10), 0 2px 6px rgba(10,37,64,.06);
  --sombra-lg: 0 18px 40px rgba(10,37,64,.16);
  --radio:    14px;
  --radio-sm: 10px;
}

/* ---------- Base / tipografía ------------------------------------------- */
html, body {
  background: var(--bg) !important;
  color: var(--texto);
  font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, .navbar-brand p {
  font-family: 'Poppins', sans-serif !important;
  color: var(--azul-900);
  letter-spacing: -.01em;
}

#contenido, #principal {
  background: transparent !important;
}

a { color: var(--azul-600); }
a:hover, a:focus { color: var(--azul-800); }

/* ---------- NAVBAR ------------------------------------------------------- */
.navbar.navbar-default {
  background: linear-gradient(100deg, var(--azul-900) 0%, var(--azul-700) 60%, var(--azul-600) 100%) !important;
  border: 0 !important;
  box-shadow: var(--sombra-md);
  border-radius: 0 0 18px 18px;
  /* OJO: nada de overflow:hidden aquí — recortaría los menús desplegables */
}

.navbar-brand p {
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
}

.navbar-default .navbar-nav > li > a {
  color: rgba(255,255,255,.88) !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 14.5px;
  border-radius: 10px;
  margin: 12px 3px;
  padding: 8px 16px !important;
  transition: background .25s ease, color .25s ease, transform .15s ease;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a {
  color: #fff !important;
  background: rgba(255,255,255,.14) !important;
  transform: translateY(-1px);
}

.navbar-default .navbar-nav > .active > a {
  background: var(--accent) !important;
  color: #fff !important;
}

/* Menús desplegables modernos */
.dropdown-menu {
  border: 0 !important;
  border-radius: var(--radio-sm) !important;
  box-shadow: var(--sombra-lg) !important;
  padding: 8px !important;
  margin-top: 6px !important;
}
.dropdown-menu > li > a {
  border-radius: 8px;
  padding: 9px 14px !important;
  color: var(--texto) !important;
  font-size: 14px;
  transition: background .2s ease, color .2s ease;
}
.dropdown-menu > li > a:hover {
  background: var(--azul-600) !important;
  color: #fff !important;
}

.navbar-toggle { border-color: rgba(255,255,255,.4) !important; }
.navbar-toggle .icon-bar { background: #fff !important; }

/* ---------- BOTONES VERTICALES (btn-vert) -------------------------------- */
.btn-vert {
  border-radius: 999px !important;
  border-width: 2px !important;
  text-transform: none !important;
  letter-spacing: .3px !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 13px 22px !important;
  box-shadow: var(--sombra-sm) !important;
  overflow: hidden;
}
.btn-vert:hover { box-shadow: var(--sombra-md) !important; transform: translateY(-2px); }

.btn-vert            { color: var(--azul-600); border-color: var(--azul-600); }
.btn-vert:before     { background-color: var(--azul-600); }
.btn-vert-naranja    { color: var(--accent);  border-color: var(--accent); }
.btn-vert-naranja:before { background-color: var(--accent); }
.btn-vert-verde      { color: var(--accent-2);border-color: var(--accent-2); }
.btn-vert-verde:before   { background-color: var(--accent-2); }
.btn-vert-rojo       { color: var(--danger);  border-color: var(--danger); }
.btn-vert-rojo:before    { background-color: var(--danger); }

/* ---------- BOTONES BOOTSTRAP genéricos ---------------------------------- */
.btn { border-radius: 10px; font-family: 'Poppins', sans-serif; font-weight: 500; }
.btn-primary { background: var(--azul-600); border-color: var(--azul-600); }
.btn-primary:hover { background: var(--azul-700); border-color: var(--azul-700); }
.btn-warning { background: var(--accent); border-color: var(--accent); color:#fff; }
.btn-warning:hover { background: #e96b0c; border-color: #e96b0c; }

/* ---------- CARTELERA DE INFORMACIÓN (well .verModal) -------------------- */
#principal h2 {
  position: relative;
  font-weight: 700;
  margin-bottom: 22px;
}
#principal h2:after {
  content: "";
  display: block;
  width: 64px; height: 4px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--accent), var(--cyan-500));
  border-radius: 4px;
}

.well.verModal {
  border-radius: var(--radio) !important;
  border: 1px solid var(--borde) !important;
  box-shadow: var(--sombra-sm) !important;
  transition: transform .22s ease, box-shadow .22s ease;
  /* el color de fondo lo asigna PHP en línea; lo suavizamos con un degradado */
  background-image: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)) !important;
}
.well.verModal:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-md) !important;
}
.verModal .tituloModal strong { color: var(--azul-900); }

/* ---------- NOTICIAS / CARRUSEL ------------------------------------------ */
.carousel, #slider {
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-md);
  background: var(--bg-card);
}
.carousel-inner > .item { padding: 6px; }
.vinculoNoticia .margenNoticias { padding-top: 18px; }
.indexVerMas {
  background: linear-gradient(0deg, rgba(10,37,64,.92), rgba(10,37,64,0)) !important;
  text-shadow: none !important;
  letter-spacing: .4px;
  font-family: 'Poppins', sans-serif;
}
.vinculoNoticia:hover > .margenNoticias h2 { color: var(--azul-600); }

/* ---------- ORIENTACIONES (tarjetas laterales) --------------------------- */
#orientaciones img {
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-sm);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
#orientaciones img:hover {
  transform: scale(1.03);
  box-shadow: var(--sombra-md);
  filter: brightness(1.05);
}

/* ---------- LOGIN -------------------------------------------------------- */
#login {
  background: linear-gradient(135deg, var(--azul-800), var(--azul-600)) !important;
  border-radius: var(--radio) !important;
  box-shadow: var(--sombra-md);
  padding: 22px !important;
}
#login h2 { color: #fff !important; font-weight: 700; }
#login .control-label { color: rgba(255,255,255,.9); }
#login .form-control {
  border-radius: 10px;
  border: 0;
  height: auto;
  padding: 10px 12px;
  font-size: 14px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}
#btn-entrar {
  background: var(--accent) !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  padding: 9px 26px;
  transition: background .2s ease, transform .15s ease;
}
#btn-entrar:hover { background: #e96b0c !important; transform: translateY(-1px); }

/* ---------- FORMULARIOS / MODALES ---------------------------------------- */
.modal-content { border: 0; border-radius: var(--radio); box-shadow: var(--sombra-lg); overflow: hidden; }
.modal-header  { background: linear-gradient(120deg, var(--azul-800), var(--azul-600)) !important; color:#fff !important; border:0; }
.modal-header .modal-title { color:#fff !important; }
.modal-header .close { color:#fff; opacity:.9; text-shadow:none; }
.form-control:focus { border-color: var(--cyan-500); box-shadow: 0 0 0 3px rgba(0,180,196,.18); }

/* Avisos */
.alert-warning {
  border: 0 !important;
  border-radius: var(--radio) !important;
  background: #fff7ec !important;
  color: #7a4a00 !important;
  box-shadow: var(--sombra-sm);
}

/* ---------- LOGOS INFERIORES --------------------------------------------- */
#logos {
  padding: 26px 0;
  background: var(--bg-card);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
  align-items: center;
}
.logoabajo > a > img { transition: filter .25s ease, transform .25s ease; }
.logoabajo > a > img:hover { transform: scale(1.06); }

/* ---------- FOOTER ------------------------------------------------------- */
footer {
  background: linear-gradient(180deg, var(--azul-900), #061a30) !important;
  border-radius: 22px 22px 0 0;
  padding: 26px 0 18px !important;
  margin-top: 30px;
}
footer strong { color: #fff; letter-spacing: .2px; }
footer a:not(.botonFooter) { color: rgba(255,255,255,.85) !important; }
footer a:not(.botonFooter):hover { color: var(--accent) !important; font-weight: 600; }

/* ---------- BOTÓN VOLVER ARRIBA ------------------------------------------ */
#return-to-top {
  background: var(--accent) !important;
  box-shadow: var(--sombra-md);
}
#return-to-top:hover { background: #e96b0c !important; }

/* ---------- BOTONES SUPERIORES (wrap3) — un poco de aire ----------------- */
.wrap3 { margin: 26px auto; }

/* ---------- RESPONSIVE fino ---------------------------------------------- */
@media (max-width: 767px) {
  .navbar.navbar-default { border-radius: 0; }
  .btn-vert { width: 90% !important; }

  /* Menús desplegables DENTRO del navbar colapsado: el submenú no es la caja
     blanca flotante sino que se muestra sobre el fondo azul oscuro, así que la
     letra debe ir en BLANCO (en escritorio sigue oscura sobre fondo blanco).
     No dependemos de la clase .open para evitar casos sin resaltar. */
  .navbar-default .navbar-collapse .navbar-nav .dropdown-menu {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  .navbar-default .navbar-collapse .navbar-nav .dropdown-menu > li > a {
    color: rgba(255, 255, 255, .9) !important;
  }
  .navbar-default .navbar-collapse .navbar-nav .dropdown-menu > li > a:hover,
  .navbar-default .navbar-collapse .navbar-nav .dropdown-menu > li > a:focus {
    color: #fff !important;
    background: rgba(255, 255, 255, .14) !important;
  }
}