/* Contenedor general */
.crp-wrap { max-width: 900px; margin: 20px 150px 20px 150px !important; font-family: system-ui, Arial, sans-serif; }



.crp-title { text-align:center; margin: 28px 0 14px; letter-spacing:.5px; font-size: 17px !important;}
.crp-subtitle {
  margin: 18px 0 10px;
  text-align: center;     /* Centra el texto */
  font-size: 25px;        /* Hazlo más grande (ajusta el valor a gusto) */
  font-weight: bold !important;       /* Opcional: más grueso */
}

.crp-help { margin: 0 0 10px; color:#6b7280; font-size: 13px; }

.crp-card { background:#fff; border:1px solid #e6e6ef; border-radius:10px; padding:18px; box-shadow:0 1px 1px rgba(0,0,0,.02); }
.crp-card-accent { border:2px solid #7A5AF8; }

.crp-form .crp-grid-3 label { display:flex; flex-direction:column; font-size:14px; gap:6px; }
.crp-form input[type="text"] { height:34px; padding:6px 10px; border:1px solid #cfd3df; border-radius:6px; }
.crp-btn { margin-top:14px; padding:10px 16px; border-radius:8px; border:0; background:#242043; color:#fff; cursor:pointer; }
.crp-btn:hover{ background:#3983d1; }
.crp-form .crp-btn {display: block; margin: 14px auto 0; }


.crp-grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
@media (max-width:820px){ .crp-grid-3{ grid-template-columns: 1fr; } }

.crp-dc-row { display:flex; gap:40px; margin-bottom:10px; font-size: 14px; }
.crp-dc-row span, .crp-iv-grid span { color:#6b7280; margin-right:6px; }


.crp-vehiculo-btn { display:block; text-align:center; padding:10px 8px; border-radius:8px; background:#191d27; color:#fff; font-size:14px; border:2px solid transparent; }
/*BOTON VEHICULO SELECCIONADO*/
.crp-vehiculo-btn.active{
  background:#3b82f6;          /* azul más notorio */
  border-color:#7A5AF8;
  color:#fff;
}
.crp-iv-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-bottom:12px; }
@media (max-width:820px){ .crp-iv-grid{ grid-template-columns: 1fr; } }

.crp-table-wrap{ margin-top:6px; overflow:auto; }
.crp-table { width:100%; border-collapse: collapse; }
.crp-table th, .crp-table td { padding:10px 8px; border-top:1px solid #ececf3; text-align:left; }
.crp-table tbody tr:first-child td { border-top:0; }

.crp-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.crp-dot.green { background:#22c55e; }
.crp-dot.red   { background:#ef4444; }

.crp-empty { color:#6b7280; }


/* Cambiamos .crp-dc-row a grid */
.crp-dc-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas en desktop */
  gap: 20px;
  margin-bottom: 10px;
}

/* En pantallas más pequeñas, que sean 2 columnas */
@media (max-width:820px){
  .crp-dc-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* En móviles muy pequeños, 1 sola columna */
@media (max-width:500px){
  .crp-dc-row {
    grid-template-columns: 1fr;
  }
}



.crp-vehiculos {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 en desktop */
  gap: 12px;
  width: 100%;
}

@media (max-width: 820px){
  .crp-vehiculos {
    grid-template-columns: repeat(2, 1fr); /* 2 en móviles */
  }
}

@media (max-width: 500px){
  .crp-vehiculos {
    grid-template-columns: 1fr; /* 1 en móviles muy pequeños */
  }
}


.crp-iv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* máximo 3 por fila en escritorio */
  gap: 12px;
  margin-bottom: 12px;
  font-size:14px;
}

/* En pantallas pequeñas → 1 sola columna */
@media (max-width: 820px){
  .crp-iv-grid {
    grid-template-columns: 1fr;
  }
}



/* Toolbar */
.crp-toolbar { display:flex; justify-content:flex-end; margin-bottom:8px; }

/* Botón mini solo-ícono (ojo / ojo tachado) */
.crp-mini-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;              /* + ancho para que no se corte */
  height:34px;             /* + alto para que el SVG respire */
  padding:0; /* sin padding, usamos width/height */
  border-radius:8px;
  border:1px solid #cfd3df;
  background:#242043;
  color:#ffffff;
  cursor:pointer;
  line-height:1;
  overflow:visible;        /* por si el SVG sale del box */
}

/* Sin efecto hover (mismo color) */
.crp-mini-btn:hover,
.crp-mini-btn:focus{
  background:#242043;
  border-color:#cfd3df;
}

/* Estado “visible” (ojo tachado) */
.crp-mini-btn[aria-pressed="true"]{
  background:#3983d1;
}

/* Tamaño de los SVG del botón */
.crp-mini-btn svg{
  width:20px;
  height:20px;
  display:block;
}







/*OVERLAY*/

/* ===== Overlay de carga de pantalla completa ===== */
#crp-loading-overlay{
  position: fixed;
  inset: 0;                          /* top:0; right:0; bottom:0; left:0 */
  display: none;                     /* visible con .is-visible */
  align-items: center;
  justify-content: center;
  background: rgba(15, 18, 29, 0.65);/* velo oscuro */
  backdrop-filter: blur(2px);        /* opcional */
  z-index: 99999;                    /* por encima de todo */
}

#crp-loading-overlay.is-visible{
  display: flex;
}

.crp-loading-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 600;
  text-align: center;
  padding: 16px 20px;
  border-radius: 10px;
}

.crp-spinner{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  border-right-color: transparent;   /* crea el efecto “giro” */
  animation: crpspin .8s linear infinite;
}

@keyframes crpspin{
  to { transform: rotate(360deg); }
}