/* ==========================================================
   MeteoChillán
   Universidad de Concepción
   ========================================================== */

:root {

  /* Colores institucionales UdeC */

  --primary: #223c6a;
  --secondary: #e69b0a;
  --danger: #d21428;
  --gray: #a0a0a0;

  /* Colores auxiliares */

  --background: #f8fafc;
  --white: #ffffff;

  --text: #333333;
  --text-light: #666666;

  --shadow: 0 2px 10px rgba(0,0,0,.08);
  --shadow-hover: 0 4px 20px rgba(0,0,0,.12);

  --radius: 10px;
}

/* ==========================================================
   Reset
   ========================================================== */

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

body{
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--background);
  line-height: 1.6;
}

/* ==========================================================
   General
   ========================================================== */

.container{
  width:90%;
  max-width:1200px;
  margin:auto;
}

a{
  color:var(--primary);
  text-decoration:none;
}

a:hover{
  color:var(--secondary);
}

img{
  max-width:100%;
  height:auto;
}

/* ==========================================================
   Navigation
   ========================================================== */

nav{
  background:var(--primary);
  color:white;
  padding:14px 0;
  text-align:center;
  position:sticky;
  top:0;
  z-index:1000;
}

nav ul{
  list-style:none;
  margin:0;
  padding:0;
}

nav ul li{
  display:inline-block;
  margin:0 18px;
}

nav ul li a{
  color:white;
  font-weight:500;
  transition:.2s;
}

nav ul li a:hover{
  color:var(--secondary);
  text-decoration:none;
}

/* ==========================================================
   Hero Banner
   ========================================================== */

.image-banner{

  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;

  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;
}

.image-banner::before{

  content:"";

  position:absolute;

  inset:0;

  background:rgba(34,60,106,.45);
}

.hero-fullscreen{
  height:45vh;
  min-height:350px;
}

.hero-small{
  height:25vh;
  min-height:180px;
}

/* ==========================================================
   Hero Text
   ========================================================== */

.text-overlay{

  position:relative;
  z-index:2;

  color:white;

  text-align:center;

  text-shadow:2px 2px 8px rgba(0,0,0,.8);

  width:90%;
}

.meteo-title{

  font-size:clamp(38px,6vw,75px);

  font-weight:800;

  line-height:1.1;

  margin-bottom:15px;
}

.meteo-subtitle{

  font-size:clamp(18px,2vw,28px);

  font-weight:400;
}

/* ==========================================================
   Sections
   ========================================================== */

.section{

  margin:0 auto;

  padding:60px 20px;

  max-width:1100px;
}

.section-title{

  text-align:center;

  color:var(--primary);

  font-size:2.2rem;

  margin-bottom:30px;
}

.section-subtitle{

  text-align:center;

  color:var(--text-light);

  margin-bottom:40px;
}

.section p,
.section ul{

  text-align:justify;
}

/* ==========================================================
   Cards
   ========================================================== */

.feature-grid{

  display:grid;

  grid-template-columns:
      repeat(auto-fit,minmax(250px,1fr));

  gap:25px;
}

.feature-card{

  background:white;

  border-top:4px solid var(--secondary);

  border-radius:var(--radius);

  padding:25px;

  box-shadow:var(--shadow);

  transition:.25s;
}

.feature-card:hover{

  transform:translateY(-5px);

  box-shadow:var(--shadow-hover);
}

.feature-card h3{

  color:var(--primary);

  margin-bottom:10px;
}

/* ==========================================================
   Monitoring Cards
   ========================================================== */

.current-card{

  background:white;

  border-radius:14px;

  padding:1.5rem;

  box-shadow:var(--shadow);

  margin:1.5rem 0 2rem;
}

.current-grid{

  display:grid;

  grid-template-columns:
      repeat(auto-fit,minmax(250px,1fr));

  gap:12px;
}

.current-item{

  display:flex;

  justify-content:space-between;

  align-items:center;

  border-bottom:1px solid #ececec;

  padding-bottom:.4rem;
}

.current-item:last-child{
  border-bottom:none;
}

.k{

  color:var(--text-light);

  text-transform:uppercase;

  font-size:.85rem;
}

.v{

  font-weight:600;

  color:var(--primary);
}

/* ==========================================================
   Station Photos
   ========================================================== */

.station-photo{

  text-align:center;

  margin-top:25px;
}

.station-photo img{

  border-radius:var(--radius);

  box-shadow:var(--shadow);

  max-width:700px;
}

.photo-caption{

  margin-top:10px;

  color:var(--text-light);

  font-size:.9rem;
}

/* ==========================================================
   Maps
   ========================================================== */

#station-map{

  width:100%;

  height:400px;

  border-radius:var(--radius);

  box-shadow:var(--shadow);

  margin-top:20px;
}

.coordinates{

  text-align:center;

  color:var(--text-light);

  margin-top:10px;
}

/* ==========================================================
   Charts
   ========================================================== */

.chart-section{

  margin-top:2.5rem;

  border-top:1px solid #e0e0e0;

  padding-top:1.5rem;
}

.chart-card{

  background:white;

  border-radius:var(--radius);

  box-shadow:var(--shadow);

  padding:1rem;

  margin-bottom:20px;
}

.chart-title{

  color:var(--primary);

  margin-bottom:15px;
}

.chart-wrap{

  width:100%;

  height:350px;

  position:relative;
}

/* ==========================================================
   Tables
   ========================================================== */

.table-container{

  overflow-x:auto;

  margin-top:20px;

  border-radius:var(--radius);

  box-shadow:var(--shadow);
}

table{

  width:100%;

  border-collapse:collapse;

  background:white;
}

thead{

  background:var(--primary);

  color:white;
}

th,
td{

  padding:12px;

  border-bottom:1px solid #e5e5e5;

  text-align:left;
}

tbody tr:hover{

  background:#f4f7fb;
}

/* ==========================================================
   Partner Logos
   ========================================================== */

.partner-grid{

  display:flex;

  flex-wrap:wrap;

  justify-content:center;

  align-items:center;

  gap:50px;
}

.partner-grid img{

  max-height:90px;

  width:auto;
}

/* ==========================================================
   Buttons
   ========================================================== */

.button-primary{

  display:inline-block;

  background:var(--primary);

  color:white;

  padding:12px 24px;

  border-radius:8px;

  text-decoration:none;

  transition:.25s;
}

.button-primary:hover{

  background:#182d52;

  color:white;

  text-decoration:none;
}

.button-secondary{

  display:inline-block;

  background:var(--secondary);

  color:white;

  padding:12px 24px;

  border-radius:8px;

  text-decoration:none;

  transition:.25s;
}

.button-secondary:hover{

  background:#cc8900;

  color:white;

  text-decoration:none;
}

/* ==========================================================
   Alert Styles
   ========================================================== */

.alert-normal{

  border-left:5px solid #4caf50;

  background:#e8f5e9;

  padding:15px;

  border-radius:8px;
}

.alert-watch{

  border-left:5px solid var(--secondary);

  background:#fff8e1;

  padding:15px;

  border-radius:8px;
}

.alert-warning{

  border-left:5px solid #ff9800;

  background:#fff3e0;

  padding:15px;

  border-radius:8px;
}

.alert-danger{

  border-left:5px solid var(--danger);

  background:#ffebee;

  padding:15px;

  border-radius:8px;
}

/* ==========================================================
   Footer
   ========================================================== */

footer{

  background:var(--primary);

  color:white;

  text-align:center;

  padding:20px;

  margin-top:50px;
}

/* ==========================================================
   Utility
   ========================================================== */

.muted{
  color:var(--text-light);
}

.ok{
  color:#28a745;
}

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

/* ==========================================================
   Responsive
   ========================================================== */

@media(max-width:768px){

  .hero-fullscreen{
    height:35vh;
  }

  .section{
    padding:40px 15px;
  }

  .section-title{
    font-size:1.8rem;
  }

  .current-grid{
    grid-template-columns:1fr;
  }

  nav ul li{
    display:block;
    margin:10px 0;
  }

}
#logo-bar {

    background:#223c6a;

    height:90px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 40px;
}

#logo-bar img {

    max-height:55px;

    width:auto;

    object-fit:contain;
}

#shared-nav {
  background: #223c6a;
  padding: 16px 0;
  text-align: center;
}

#shared-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#shared-nav ul li {
  display: inline-block;
  margin: 0 35px;
}

#shared-nav ul li a {
  color: white;
  font-weight: 600;
  font-size: 1.15rem;
  text-decoration: none;
}

#shared-nav ul li a:hover {
  color: #e69b0a;
}
.station-photo{
    text-align:center;
    margin-top:25px;
}

#logo-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 30px;
    background:#233b6e;
}

.logo-meteochillan{
    height:90px !important;
    width:auto !important;
    max-height:none !important;
    object-fit:contain;
}
#logo-bar img{
    width:auto;
    object-fit:contain;
}
.logo-udec{
    height:70px;
    width:auto;
}

.logo-meteochillan{
    height:120px;
    width:auto;
}
.page-banner-title{
    font-size:4rem;
    font-weight:800;
    color:white;
    text-shadow:3px 3px 12px rgba(0,0,0,.8);
}

.contact-container {
    width: min(1100px, 90%);
    margin: 2rem auto;
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 2rem;
}

.contact-information,
.contact-form-container {
    background: #ffffff;
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
}

.contact-information h2,
.contact-form-container h2 {
    color: #223c6a;
    margin-top: 0;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.contact-form label {
    margin-top: 0.5rem;
    font-weight: 600;
    color: #223c6a;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.8rem;
    border: 1px solid #b8bec8;
    border-radius: 6px;
    font: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: 2px solid #e69b0a;
    border-color: transparent;
}

.contact-form button {
    margin-top: 1rem;
    padding: 0.85rem 1.2rem;
    border: none;
    border-radius: 6px;
    background: #223c6a;
    color: white;
    font-weight: 700;
    cursor: pointer;
}

.contact-form button:hover {
    background: #182f56;
}

.contact-form button:disabled {
    opacity: 0.65;
    cursor: wait;
}

.contact-status {
    min-height: 1.5rem;
    margin-top: 0.5rem;
}

.contact-status.success {
    color: #18753c;
}

.contact-status.error {
    color: #b42318;
}

.contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 800px) {
    .contact-container {
        grid-template-columns: 1fr;
    }
}
.content-container{
    width:90%;
    max-width:900px;
    margin:40px auto;
}

.contact-card{
    margin-top:25px;
    background:#fff;
    border-radius:10px;
    padding:25px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.contact-card h3{
    color:#223c6a;
    margin-top:0;
}

.contact-card a{
    color:#223c6a;
    font-weight:600;
}

.contact-card a:hover{
    color:#e69b0a;
}