/* Contenedor general */

.crp-wrap {
  max-width: 1100px;
  margin: 20px auto;      
  padding: 20px;          
  font-family: system-ui, Arial, sans-serif;
}


@media (max-width: 767px){
  .crp-wrap{
    max-width: 100% !important;      
    margin: 10px auto !important;    
    padding: 15px 12px !important;   
  }
}

@media (min-width: 768px) and (max-width: 1024px){
  .crp-wrap{
    max-width: 95%;           /* casi todo el ancho */
    margin: 20px auto;
    padding: 25px;
  }
}
.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;     
  font-size: 25px;        
  font-weight: bold !important;       
}

.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 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-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); }
}


.crp-actions{
  display:flex;
  gap:12px;
  align-items:center;
}
.crp-btn-secondary{
  background:#e9e9ef;
  color:#242043;
}
.crp-btn-secondary:disabled{
  opacity:.5;
  cursor:not-allowed;
}
/* Input inline (modo edición) - sutil y no rompe el grid */
.crp-inline-input{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid rgba(36,32,67,.18);
  border-radius: 10px;
  background: #fbfbfe;
  color: #242043;
  outline: none;
  font-size: 14px;
  line-height: 1.2;
}

.crp-inline-input:focus{
  border-color: rgba(36,32,67,.35);
  box-shadow: 0 0 0 3px rgba(36,32,67,.08);
  background: #fff;
}


/* Evita desbordes dentro del grid cuando metes inputs en spans */
.crp-iv-grid > div,
.crp-dc-row > div{
  min-width: 0; /* IMPORTANTÍSIMO para grids */
}

/* El span que contiene el input debe ser caja */
#crp-info-vehiculo span,
#crp-datos-cliente span{
  display: inline-block;
  width: 100%;
  min-width: 0;
  vertical-align: middle;
}


#crp-info-vehiculo strong{
  display:inline-block;
  white-space: nowrap;
  margin-right: 6px;
}


/* Columna Estado: alinear punto + texto */
#crp-certificados td:nth-child(4){
  white-space: nowrap;
}

#crp-certificados td:nth-child(4) .crp-dot,
#crp-certificados td:nth-child(4) .crp-estado{
  display: inline-block;
  vertical-align: middle;
}

#crp-certificados td:nth-child(4) .crp-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

#crp-certificados td:nth-child(4) .crp-estado{
  line-height: 1.2;
}



#crp-form-pdf{
  display: flex;
  justify-content: center;
}