/* ==============================
   SISTEMA GUARDA EQUIPAJE
   TERMINAL DE TRANSPORTES
============================== */

*{
  box-sizing:border-box;
}

body{
  font-family:'Segoe UI', sans-serif;
  background:#dbeafe; /* Azul celeste claro */
  margin:0;
  padding:20px;
  color:#0f172a;
}

/* TITULOS */

h1{
  text-align:center;
  color:#0c4a6e;
  margin-bottom:30px;
  font-weight:600;
}

h2{
  margin-top:0;
  color:#0f172a;
}

/* CONTENEDOR GENERAL */

.container{
  max-width:1500px;
  margin:auto;
}

/* =========================
   PANEL SUPERIOR 2 COLUMNAS
========================= */

.panel-superior{
  display:flex;
  gap:25px;
  margin-bottom:25px;
}

.registro-card{
  flex:1;
  background:#ffedd5; /* Naranja claro */
  border:1px solid #fdba74;
}

.pendientes-card{
  flex:1;
  background:#fff7ed; /* Naranja aún más suave */
  border:1px solid #fb923c;
}

/* TARJETAS BASE */

.card{
  padding:25px;
  border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,0.08);
  transition:0.2s ease;
}

/* TARJETA INFERIOR (REGISTROS DEL DIA) */

.container > .card{
  background:#e0f2fe; /* Azul diferente al fondo */
  border:1px solid #7dd3fc;
  margin-bottom:25px;
}

/* GRID FORMULARIO */

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}

/* INPUTS */

input, textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  font-size:14px;
  transition:0.2s ease;
}

input:focus, textarea:focus{
  outline:none;
  border-color:#f97316;
  box-shadow:0 0 0 2px rgba(249,115,22,0.2);
}

textarea{
  resize:none;
}

/* BOTONES */

button{
  border:none;
  padding:8px 14px;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  font-size:13px;
  transition:0.2s ease;
}

button:hover{
  transform:translateY(-1px);
  opacity:0.95;
}

.btn-primary{ background:#2563eb; color:white; }
.btn-success{ background:#16a34a; color:white; }
.btn-warning{ background:#f59e0b; color:white; }
.btn-danger{ background:#dc2626; color:white; }
.btn-secondary{ background:#64748b; color:white; }

/* TABLAS */

table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  background:white;
  border-radius:10px;
  overflow:hidden;
}

thead{
  background:#0284c7;
  color:white;
}

th{
  padding:10px;
  font-weight:600;
}

td{
  padding:8px;
  text-align:center;
  border-bottom:1px solid #e2e8f0;
}

tr:nth-child(even){
  background:#f0f9ff;
}

tr:hover{
  background:#bae6fd;
}

.actions button{
  margin:2px;
}

/* LOGIN */

#loginContainer{
  width:340px;
  margin:120px auto;
  background:white;
  padding:30px;
  border-radius:16px;
  box-shadow:0 8px 30px rgba(0,0,0,0.12);
  text-align:center;
}

/* BARRA SUPERIOR */

.topBar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#0c4a6e;
  color:white;
  padding:12px 20px;
  margin-bottom:20px;
  border-radius:12px;
  font-size:14px;
}

.logoutBtn{
  background:#dc2626;
  color:white;
  padding:6px 12px;
}

/* =========================================
   ✔ ALINEACIÓN CHECKBOX Y RADIO
========================================= */

input[type="checkbox"],
input[type="radio"] {
    margin-right: 6px;
    vertical-align: middle;
}

label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 15px;
    margin-bottom: 5px;
    cursor: pointer;
}


/* RESPONSIVE */

@media(max-width:1000px){

  .panel-superior{
    flex-direction:column;
  }

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

  .topBar{
    flex-direction:column;
    gap:10px;
    text-align:center;
  }

}

.estado {
  padding:4px 8px;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
}

.verde {
  background:#dcfce7;
  color:#166534;
}

.naranja {
  background:#ffedd5;
  color:#9a3412;
}

/* MODAL */
.modal-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:999;
}

.modal{
  background:white;
  padding:25px;
  border-radius:14px;
  width:320px;
  text-align:center;
}

.modal input{
  margin-top:10px;
  margin-bottom:15px;
}

.modal-buttons{
  display:flex;
  justify-content:space-between;
}

.dashboard{
  display:flex;
  gap:20px;
  margin-bottom:25px;
  flex-wrap:wrap;
}

.card-mini{
  flex:1;
  min-width:200px;
  background:white;
  padding:20px;
  border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,0.08);
  text-align:center;
}

.card-mini h3{
  margin:0;
  font-size:14px;
  color:#64748b;
}

.card-mini span{
  display:block;
  font-size:26px;
  font-weight:700;
  margin-top:8px;
  color:#0c4a6e;
}