/* ===================== Variables & reset ===================== */
:root{
  --blue:        #1d6fb8;   /* enlaces / nav */
  --blue-bar:    #1379bb;   /* barra de pestañas */
  --blue-active: #0f6aa8;   /* pestaña activa */
  --teal:        #25b6c9;   /* acento (texto hero + botón) */
  --teal-dark:   #1ea0b2;   /* botón hover */
  --label:       #1c5a9e;   /* etiquetas azules */
  --info-bg:     #ecf7fb;
  --info-border: #d6ebf4;
  --text:        #2c2c2c;
  --heading:     #1b1b1b;
  --container:   1600px;
}

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

body{
  font-family:'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.5;
  /* Sticky footer: el body ocupa toda la altura y el main crece para
     empujar el footer hasta abajo (sin espacio blanco sobrante). */
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

.content{ flex:1 0 auto; }

a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 40px;
}

.icon{ width:18px; height:18px; fill:currentColor; }

/* ===================== Header ===================== */
.site-header{ background:#fff; }

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:90px;
}

.brand{ display:flex; align-items:center; gap:22px; }
.logo-siscar{ height:42px; }
.logo-caldas{ height:58px; }
.brand-divider{ width:1px; height:48px; background:#cdd6dd; }

.main-nav{ display:flex; align-items:center; gap:34px; }
.main-nav a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--blue);
  font-size:16px;
}

/* ===================== Hero ===================== */
.hero{
  position:relative;
  color:#fff;
  /* Foto de fondo + overlay oscuro para que el texto blanco sea legible */
  background:
    linear-gradient(90deg, rgba(20,40,55,.88) 0%, rgba(35,60,80,.70) 55%, rgba(55,85,105,.45) 100%),
    url('bg_portal_manizales.jpg') center/cover no-repeat;
}

.hero-inner{ padding:34px 40px; }
.hero h1{
  font-size:30px;
  font-weight:600;
  margin-bottom:10px;
}
.hero h1 span{ color:var(--teal); }
.hero p{
  font-size:16px;
  max-width:900px;
  opacity:.95;
}

/* ===================== Tabs ===================== */
.tabs{ background:var(--blue-bar); }
.tabs-inner{ display:flex; gap:2px; }

.tab{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:120px;
  padding:18px 10px;
  color:#fff;
  font-size:14px;
}
.tab:hover{ background:rgba(255,255,255,.08); text-decoration:none; }
.tab-icon{ width:26px; height:26px; fill:#fff; }

.tab--active{ background:var(--blue-active); }
.tab--active::after{
  content:"";
  position:absolute;
  bottom:-9px;
  left:50%;
  transform:translateX(-50%);
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:9px solid var(--blue-active);
}

/* ===================== Content ===================== */
.content{ padding:55px 40px 80px; }

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
}

.section-title{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:26px;
  font-weight:600;
  color:var(--heading);
  margin-bottom:32px;
}
.icon-title{ width:24px; height:24px; fill:var(--heading); }

/* --- formulario --- */
.field-label{
  display:block;
  color:var(--label);
  font-weight:700;
  font-size:15px;
  margin-bottom:10px;
}

.input-wrap{ position:relative; }
.input-wrap input{
  width:100%;
  padding:15px 50px 15px 16px;
  font-size:16px;
  color:var(--text);
  background:#fbfcfd;
  border:1px solid #c9d4dc;
  border-radius:8px;
  outline:none;
}
.input-wrap input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(29,111,184,.15);
}
.input-icon{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  fill:#6c7a86;
  pointer-events:none;
}

.checkbox{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:18px 0 26px;
  font-size:15px;
  color:var(--text);
}
.checkbox input{
  width:17px;
  height:17px;
  margin-top:2px;
  accent-color:var(--blue);
}

.btn-consultar{
  background:var(--teal);
  color:#fff;
  font-weight:700;
  font-size:15px;
  letter-spacing:.4px;
  border:none;
  border-radius:6px;
  padding:13px 26px;
  cursor:pointer;
  transition:background .15s ease;
}
.btn-consultar:hover{ background:var(--teal-dark); }

/* --- caja de información --- */
.info-box{
  background:var(--info-bg);
  border:1px solid var(--info-border);
  border-radius:10px;
  padding:30px 34px;
}
.info-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
}
.info-icon{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.info-icon svg{ width:36px; height:36px; fill:#15659e; }
.info-head h3{ font-size:16px; color:var(--heading); }
.info-box p{ font-size:15.5px; color:#3a4a55; }
.info-box hr{
  border:none;
  border-top:1px solid var(--info-border);
  margin:20px 0;
}
.info-foot{ color:var(--heading); }

/* ===================== Página de resultados ===================== */
.hero--result .hero-inner{ padding:26px 40px; }
.placa-line{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:26px;
  font-weight:400;
}
.placa-icon{ width:30px; height:30px; fill:#fff; }
#placaText{ color:var(--teal); font-weight:700; }

/* barra de 7 pestañas */
.tabs--result .tabs-inner{ gap:0; }
.tabs--result .tab{
  width:auto;
  flex:1 1 0;
  min-width:120px;
  padding:16px 8px;
  font-size:13px;
  text-align:center;
  border-right:1px solid rgba(255,255,255,.12);
}
.tabs--result .tab:first-child{ border-left:1px solid rgba(255,255,255,.12); }
.tabs--result .tab span{ line-height:1.25; }

.content--result{ padding:45px 40px 70px; }

.loader{
  text-align:center;
  color:#5a6b76;
  font-size:17px;
  padding:60px 0;
}
.error-box{
  background:#fdecea;
  border:1px solid #f5c2bd;
  color:#9b2c22;
  padding:18px 22px;
  border-radius:8px;
  font-size:16px;
}

/* tarjetas y paneles */
.panel{ display:none; }
.panel--active{ display:block; }

.card{
  background:#fff;
  border:1px solid #e7edf1;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  padding:26px 28px;
}
.card-title{
  text-align:center;
  color:var(--blue);
  font-size:24px;
  font-weight:600;
  margin-bottom:22px;
}

/* tabla genérica */
.table-wrap{ overflow-x:auto; }
.data-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 0;
  font-size:14px;
}
.data-table th{
  background:var(--blue-bar);
  color:#fff;
  font-weight:600;
  padding:11px 12px;
  text-align:center;
  white-space:nowrap;
}
.data-table td{
  padding:12px;
  text-align:center;
  color:#37474f;
  border-bottom:1px solid #eef3f6;
}
.data-table tbody tr:nth-child(odd){ background:#f4f9fc; }
.data-table tbody tr:nth-child(even){ background:#fff; }
.data-table td.empty{
  text-align:left;
  padding:16px 6px;
  color:#37474f;
  background:#fff;
}

/* info del vehículo: rejilla etiqueta/valor (3 pares por fila) */
.kv-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:6px 0;
}
.kv-label, .kv-value{
  padding:13px 14px;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.kv-label{
  background:var(--blue-bar);
  color:#fff;
  font-weight:600;
}
.kv-value{ background:#eef6fb; color:#37474f; }
.kv-empty{ background:transparent; }

/* botones y barras de acción */
.card-actions{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:22px;
}
.btn-teal{
  background:var(--teal);
  color:#fff;
  font-size:14px;
  font-weight:500;
  border:none;
  border-radius:5px;
  padding:11px 20px;
  cursor:pointer;
  transition:background .15s ease;
}
.btn-teal:hover{ background:var(--teal-dark); }

.total-bar{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:4px;
  background:#eef6fb;
  padding:14px 18px;
}
.total-label{
  background:var(--blue-bar);
  color:#fff;
  font-weight:600;
  padding:10px 22px;
  border-radius:3px;
}
.total-value{ font-weight:600; color:#37474f; min-width:120px; }
.print-icon{ width:22px; height:22px; fill:var(--blue); cursor:pointer; }

.row-actions{ display:inline-flex; gap:8px; justify-content:center; }
.ra-btn{
  background:none;
  border:none;
  padding:4px;
  cursor:pointer;
  line-height:0;
  border-radius:5px;
  transition:background .15s ease;
}
.ra-btn:hover{ background:rgba(29,111,184,.12); }
.ra-icon{ width:20px; height:20px; fill:var(--blue); }

/* ===================== Modal de detalle ===================== */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,30,40,.5);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:40px 16px;
  overflow-y:auto;
  z-index:1000;
}
.modal{
  position:relative;
  background:#fff;
  width:100%;
  max-width:420px;
  border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.3);
  padding:34px 30px 30px;
  animation:modal-in .18s ease-out;
}
@keyframes modal-in{ from{ opacity:0; transform:translateY(-12px); } to{ opacity:1; transform:none; } }

.modal-close{
  position:absolute;
  top:10px;
  right:12px;
  width:34px;
  height:34px;
  border:1px solid #d7dee3;
  border-radius:7px;
  background:#fff;
  color:#5a6b76;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease;
}
.modal-close:hover{ background:#f0f4f7; }

.modal-icon{ text-align:center; margin-bottom:10px; }
.modal-info{ width:86px; height:86px; }
.modal-title{
  text-align:center;
  font-size:25px;
  font-weight:800;
  color:#555;
  line-height:1.25;
  margin-bottom:22px;
}

.detalle-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:15px; }
.detalle-table th{
  background:var(--blue-bar);
  color:#fff;
  font-weight:600;
  padding:11px 14px;
  text-align:center;
}
.detalle-table th:last-child{ text-align:right; }
.dt-label{
  background:var(--blue-bar);
  color:#fff;
  font-weight:600;
  text-align:center;
  padding:11px 14px;
}
.dt-value{
  text-align:right;
  padding:11px 14px;
  color:#37474f;
}
.detalle-table tbody tr:nth-child(odd) .dt-value{ background:#eef6fb; }
.detalle-table tbody tr:nth-child(even) .dt-value{ background:#fff; }

/* ===================== Footer ===================== */
.site-footer{
  background:#0b3a4f;
  color:#dfe8ec;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:34px 40px;
}
.footer-left{
  display:flex;
  align-items:flex-start;
  gap:22px;
}
.footer-caldas{ height:80px; flex:0 0 auto; }
.footer-address{
  font-style:normal;
  font-size:14px;
  line-height:1.7;
  color:#e7eef1;
}
.footer-logos{ height:60px; flex:0 0 auto; }

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

/* Tablet grande: las 7 pestañas pasan a tira deslizable y la info a 4 columnas */
@media (max-width:1200px){
  .tabs--result .tabs-inner{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:thin;
  }
  .tabs--result .tabs-inner::-webkit-scrollbar{ height:5px; }
  .tabs--result .tabs-inner::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.4); border-radius:3px; }
  .tabs--result .tab{ flex:0 0 auto; width:130px; }
  .kv-grid{ grid-template-columns:repeat(4, 1fr); }
  .kv-empty{ display:none; }
}

/* Tablet / móvil: una sola columna en el inicio, header y footer apilados */
@media (max-width:900px){
  .container{ padding:0 24px; }
  .grid{ grid-template-columns:1fr; gap:40px; }
  .header-inner{ flex-direction:column; gap:16px; min-height:auto; padding:18px 0; }
  .main-nav{ gap:20px; flex-wrap:wrap; justify-content:center; }
  .hero h1{ font-size:22px; }
  .hero p{ font-size:15px; }
  .placa-line{ font-size:22px; }
  .content, .content--result{ padding:34px 0 56px; }
  .container.content, .container.content--result{ padding-left:24px; padding-right:24px; }
  .tabs .tabs-inner{ justify-content:flex-start; }
  .card{ padding:20px 16px; }
  .card-title{ font-size:21px; }
  .footer-inner{ flex-direction:column; align-items:flex-start; gap:26px; padding:30px 24px; }
  .footer-caldas{ height:64px; }
  .footer-logos{ height:46px; max-width:100%; }
}

/* Móvil: info en pares por fila, totales y acciones que envuelven */
@media (max-width:560px){
  .container{ padding:0 16px; }
  .container.content, .container.content--result{ padding-left:16px; padding-right:16px; }
  .kv-grid{ grid-template-columns:1fr 1fr; }
  .kv-label, .kv-value{ padding:11px 8px; font-size:13px; }
  .card-actions{ flex-direction:column; }
  .card-actions .btn-teal{ width:100%; }
  .total-bar{ flex-wrap:wrap; gap:12px; }
  .modal-title{ font-size:22px; }
  .modal{ padding:30px 18px 22px; }
  .hero-inner, .hero--result .hero-inner{ padding:22px 16px; }
}