*{
box-sizing:border-box;
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}

body{
background:#e9e5d3;
}


/* HEADER */

.topbar{

background:linear-gradient(90deg,#4f46e5,#9333ea);
color:white;
padding:20px;

}

.topbar-container{

max-width:1200px;
margin:auto;

display:flex;
justify-content:space-between;
align-items:center;

}

.title h1{
font-size:30px;
}

.title p{
opacity:.8;
}


/* STATS */

.stats{
display:flex;
gap:20px;
}

.stat{

background:rgba(255,255,255,.2);
padding:15px 20px;
border-radius:10px;
text-align:center;

}

.stat span{
font-size:13px;
}

.stat h2{
font-size:22px;
}


/* CONTENEDOR */

.container{

max-width:1100px;
margin:auto;
padding:30px;

}


/* TABS */

.tabs{

display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:15px;
margin-bottom:25px;

}

.tab{

border:none;
padding:14px;
border-radius:8px;
color:white;
font-weight:bold;
cursor:pointer;

}

.tab.registrar{
background:#22c55e;
}

.tab.pagar{
background:#3b82f6;
}

.tab.historial{
background:#eab308;
}

.tab.active{
box-shadow:0 4px 10px rgba(0,0,0,.3);
}


/* PANEL */

.panel{

background:white;
padding:25px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,.1);

display:none;

}

.panel.active{
display:block;
}

.panel-header{

display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;

}


/* FORM */

.form-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
margin-bottom:25px;

}

label{
display:block;
margin-bottom:5px;
font-weight:bold;
}

input,select{

width:100%;
padding:10px;
border:1px solid #ccc;
border-radius:6px;

}

.btn-main{

background:#22c55e;
color:white;
border:none;
padding:12px 20px;
border-radius:8px;
cursor:pointer;

}

.btn-secondary{

background:#f97316;
color:white;
border:none;
padding:10px 15px;
border-radius:6px;
cursor:pointer;

}


/* TABLAS */

table{

width:100%;
border-collapse:collapse;
margin-top:15px;

}

th{

background:#3b82f6;
color:white;
padding:10px;

}

td{

padding:10px;
border-bottom:1px solid #ddd;

}

.empty{
text-align:center;
color:#777;
}

.btn-main{

display:block;
margin-left:auto;
margin-top:10px;
width:220px;

}

.estado-pendiente{

color:#dc2626;
font-weight:bold;

}

.estado-cobrado{

color:#16a34a;
font-weight:bold;

}



.btn-editar{

background:#3b82f6;
color:white;
border:none;
padding:5px 8px;
border-radius:4px;
cursor:pointer;

}

.btn-eliminar{

background:#dc2626;
color:white;
border:none;
padding:5px 8px;
border-radius:4px;
cursor:pointer;
margin-left:5px;

}

.panel-retroactivo{

display:none;
margin-top:20px;
padding:20px;

background:#fff4e5;
border:2px solid #f5a623;
border-radius:10px;

}

.panel-retroactivo h3{

color:#b36b00;

}

/* EFECTO HOVER PARA BOTONES */

button{

transition: all 0.2s ease;

}

/* Cuando el puntero pasa sobre el botón */

button:hover{

transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
filter: brightness(1.05);

}

/* Cuando se hace clic */

button:active{

transform: translateY(1px);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);

}

/* FILAS ALTERNADAS EN TABLAS */

table tbody tr:nth-child(odd){
background-color:#f3f8ff;   /* azul muy muy claro */
}

table tbody tr:nth-child(even){
background-color:#e4f0ff;   /* azul claro */
}

table tbody tr:hover{
background-color:#d6e8ff;
}

/* ============================
TABLA PENDIENTES
============================ */

.tablaPendientes{
width:100%;
border-collapse:collapse;
margin-top:10px;
}

.tablaPendientes th,
.tablaPendientes td{
padding:8px;
border-bottom:1px solid #ddd;
text-align:left;
}

.tablaPendientes tr:hover{
background:#fff0b3;
cursor:pointer;
}

.tablaPendientes th{
background:#ffe28a;
}


/* ============================
HISTORIAL EN CUADRÍCULA
============================ */

.gridHistorial{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:12px;
margin-top:15px;
}

.cajaHistorial{
background:#eef6ff;
padding:12px;
border-radius:8px;
border:1px solid #d6e6ff;
font-size:14px;
}

.placaHistorial{
font-weight:bold;
font-size:16px;
margin-bottom:6px;
}

.pagoHistorial{
font-size:12px;
color:#444;
}

/* ================================
BOTON REPORTE
================================ */

.btn-reporte{

background:#2c7be5;
color:white;
border:none;
padding:10px 18px;
border-radius:6px;
font-weight:600;
cursor:pointer;
margin-left:20px;
transition:0.2s;

}

.btn-reporte:hover{

background:#1a5fd1;

}

/* ================================
PANEL REPORTE
================================ */

#panelReporte{

background:white;
border-radius:8px;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
margin-top:30px;

}

#panelReporte h2{

margin-bottom:15px;
font-size:22px;

}

#panelReporte div{

font-size:16px;
margin-bottom:15px;

}

#reporteVehiculos{

font-weight:bold;
color:#2c7be5;

}

#reporteTotal{

font-weight:bold;
color:#1b9e3e;

}

/* ================================
TABLA REPORTE
================================ */

#panelReporte table{

width:100%;
border-collapse:collapse;
background:white;

}

#panelReporte th{

background:#2c7be5;
color:white;
padding:10px;
text-align:center;
font-size:14px;

}

#panelReporte td{

padding:8px;
border-bottom:1px solid #e6e6e6;
text-align:center;
font-size:14px;

}

#panelReporte tr:hover{

background:#f5f8ff;

}

/* ===== REPORTE ===== */

.reporte-container{
background:#fff;
padding:20px;
border-radius:10px;
box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

.reporte-title{
margin-bottom:20px;
}

.reporte-filtros{
display:flex;
gap:15px;
align-items:end;
margin-bottom:20px;
flex-wrap:wrap;
}

.reporte-resumen{
display:flex;
gap:20px;
margin-bottom:20px;
}

.resumen-card{
background:#f1f5f9;
padding:15px;
border-radius:8px;
flex:1;
text-align:center;
}

.resumen-card h3{
margin:5px 0 0 0;
font-size:22px;
}

.reporte-acciones{
margin-bottom:20px;
display:flex;
gap:10px;
flex-wrap:wrap;
}

.tabla-contenedor{
overflow:auto;
}

.tabla-reporte{
width:100%;
border-collapse:collapse;
}

.tabla-reporte th{
background:#1e293b;
color:#fff;
padding:10px;
font-size:13px;
}

.tabla-reporte td{
padding:8px;
border-bottom:1px solid #ddd;
font-size:13px;
}

/* BOTONES */

.btn-main{
background:#2563eb;
color:#fff;
border:none;
padding:10px 15px;
border-radius:6px;
cursor:pointer;
}

.btn-secondary{
background:#64748b;
color:#fff;
border:none;
padding:10px 15px;
border-radius:6px;
cursor:pointer;
}

.btn-danger{
background:#dc2626;
color:#fff;
border:none;
padding:10px 15px;
border-radius:6px;
cursor:pointer;
}

/* =========================
BOTONES MODERNOS
========================= */
button {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* BOTONES PRINCIPALES (Cobrar, Cobrar seleccionados) */
button.btn-main, .placaPendiente button {
  background-color: #6cbf84; /* verde suave */
  color: white;
}

button.btn-main:hover, .placaPendiente button:hover {
  background-color: #58a36c;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

/* BOTONES SECUNDARIOS (Editar POS) */
button.btn-secondary {
  background-color: #87bafc; /* azul suave */
  color: white;
}

button.btn-secondary:hover {
  background-color: #5f9df7;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

/* BOTONES DE CANCELAR O PELIGRO */
button.btn-danger {
  background-color: #f58686; /* rojo suave */
  color: white;
}

button.btn-danger:hover {
  background-color: #e05252;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

/* BOTONES DE PEQUEÑOS ACCIONES DENTRO DE TABLAS */
.tablaPendientes button, .tablaPagos button {
  padding: 6px 12px;
  font-size: 0.9rem;
  border-radius: 6px;
}


.btn-eliminar {
  background: #ff6b6b;
  border: none;
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  margin-left: 10px;
  cursor: pointer;
  font-size: 12px;
}

.btn-eliminar:hover {
  background: #ff4d4d;
}