/*
-- ===================================================================================
-- Empresa: Preparatoria la Salle del Pedregal
-- Proyecto: Sistema Integral de la Preparatoria la Salle del Pedregal (SIPS)
-- Módulo: Layout general (cabecera y pie de página)
-- Archivo: layout_sips.css
-- Autor: Ing. Rodrigo Bass Vega
-- Objetivo:
--   Definir el estilo base del layout público:
--     - Tipografía general del sistema.
--     - Estilo del header (barra superior con logos PLSP y SIPS).
--     - Estilo del footer institucional.
--     - Comportamiento responsivo de los logos.
--     - Clases utilitarias usadas en varias pantallas (bg-sips, inputs centrados).
-- Última Modificación: [, ]
-- Realizó:
-- Observaciones:
--   - Este CSS se carga en: Html_En_Linea.php
--   - Depende de Bootstrap 5 para la estructura de grid.
-- ===================================================================================
*/

/* ==========================================================================
   1. Tipografía y texto base
   --------------------------------------------------------------------------
   - Se utiliza la fuente "Source Sans Pro" cargada desde Google Fonts en
     Html_En_Linea.php.
   - Se define un color de texto genérico para el sitio.
   ========================================================================== */
body {
  font-family: 'Source Sans Pro', sans-serif;
  color: #414141;
}

/* ==========================================================================
   2. Header principal
   --------------------------------------------------------------------------
   - Barra superior del sitio donde se muestran:
       * Logo de la Preparatoria La Salle del Pedregal (izquierda).
       * Logo de SIPS (derecha / centrado en móvil).
   - La altura fija ayuda a mantener un layout consistente.
   - La línea inferior dorada refuerza identidad institucional.
   ========================================================================== */
header {
  height: 130px;
  border-bottom: 6px solid rgb(152, 112, 53); /* dorado institucional */
}

/* Contenedor que envuelve header + contenido, para quitar padding
   por defecto de Bootstrap y controlar el box-sizing. */
.header_container {
  padding: 0;
  box-sizing: border-box;
}

/* Fondo azul institucional para la barra del header (clase reutilizada). */
.bg-sips {
  background-color: rgb(3, 62, 140);
}

/* ==========================================================================
   3. Logos institucionales
   --------------------------------------------------------------------------
   - .logo_plsp: logo horizontal de la prepa (lado izquierdo).
   - .logo_sips: logo del sistema SIPS (lado derecho).
   - En escritorio cada uno conserva un ancho máximo.
   - En móvil se adaptan para mejorar legibilidad y evitar solapamientos.
   ========================================================================== */

/* Logo de la PLSP, alineado a la izquierda */
.logo_plsp {
  float: left;
  max-width: 285px;        /* ancho máximo del logo */
}

/* Logo de SIPS, alineado a la derecha */
.logo_sips {
  float: right;
  max-width: 220px;        /* ancho máximo del logo */
}

/* ==========================================================================
   4. Footer institucional
   --------------------------------------------------------------------------
   - Barra inferior fija en toda la vista pública.
   - Se apoya en clases utilitarias de Bootstrap:
       * d-flex, justify-content-center, align-items-center.
   - Aquí sólo definimos altura, borde y fondo para mantener la identidad.
   ========================================================================== */
footer {
  height: 50px;
  border-top: 6px solid rgb(152, 112, 53); /* misma línea dorada que el header */
  background-color: lightgrey;
  left: 0;
  bottom: 0;
  width: 100%;
}

/* ==========================================================================
   5. Separadores (líneas <hr>)
   --------------------------------------------------------------------------
   - Se redefine el estilo estándar del <hr> para que coincida con el azul
     institucional y tenga bordes redondeados.
   ========================================================================== */
hr {
  border: 3px solid #005589;
  border-radius: 5px;
}

/* ==========================================================================
   6. Campos de texto centrados y placeholders
   --------------------------------------------------------------------------
   - .centrar::placeholder: estiliza el texto del placeholder.
   - .inputcentrado: centra el texto ingresado por el usuario.
   - Se usa principalmente en formularios del área de promoción.
   ========================================================================== */

/* Placeholder centrado y con un tono naranja translúcido */
.centrar::placeholder {
  color: rgba(255, 87, 51, 0.5);
  text-align: center;
}

/* Texto real centrado y con mismo tono que el placeholder */
.inputcentrado {
  text-align: center;
  color: rgba(255, 87, 51, 0.5);
}

/* ==========================================================================
   7. Responsividad (móviles y pantallas pequeñas)
   --------------------------------------------------------------------------
   - Cuando el ancho de la pantalla es menor a 800px:
       * Se oculta el logo de la prepa (para dar prioridad al de SIPS).
       * El logo de SIPS se centra horizontalmente.
       * Se corrige un posible margen superior adicional con .mt-0.
   ========================================================================== */
@media screen and (max-width: 800px) {
  /* Se oculta el logo de la prepa para ganar espacio vertical */
  .logo_plsp {
    display: none;
  }

  /* El logo de SIPS deja de flotar y se centra */
  .logo_sips {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }

  /* Utilidad para resetear margen top en elementos que lo usen */
  .mt-0 {
    margin-top: 0 !important;
  }
}