.container {
  max-width: 780px;
  margin: 30px auto;
  padding: 20px;
  background-color: #0a0a23;
  border-radius: 14px;
}       

body {
  background-color: #0a0a23;
  font-family: 'Poppins', sans-serif;
  color: white;
  margin: 0;
  padding: 0;
}

.selector-color {
  text-align: center;
  margin: 15px;
}

.selector-color label {
  display: inline-block;
  padding: 10px 16px;
  background: #222;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
}

.selector-color input {
  display: none;
}

.container {
  padding: 5px;
  padding-top: -20cm;  /* Espacio superior reducido */
  padding-bottom: 2cm;
}

/* =========================
   ESTILOS PARA MÓVIL (por defecto)
   ========================= */
input, select, textarea { 
  font-family: "Poppins",   
  sans-serif; font-size: 10px; 
  width: 3.5cm; /* ancho uniforme */ 
  padding: 5px; 
  margin: 3px 0 3px 0px; 
  box-sizing: border-box; 
  user-select: none;
} 

/* Efecto al enfocarse SOLO PARA MÓVIL (tocar en móvil) */
input:not([type="date"]):focus, 
input:focus, 
select:focus, 
textarea:focus { 
  font-size: 18px; /* tamaño de fuente mayor */ 
  width: 3.5cm; /* ancho mayor */ 
  padding: 10px; /* padding más cómodo */ 
} 

/* En móvil, todos los inputs especiales tienen el mismo ancho */
input[type="date"], 
input[type="number"], 
input[type="email"], 
input[type="password"] { 
  width: 3.5cm; /* MISMO ANCHO que los comunes en móvil */
  box-sizing: border-box; 
} 

/* =========================
   Encabezados y títulos (móvil)
   ========================= */
h1, label h1 { 
  font-size: 14px; 
  font-weight: normal; 
} 

/* =========================
   ESTILOS PARA COMPUTADORA
   ========================= */
@media (min-width: 769px) {
  input, select, textarea { 
    font-family: "Poppins",   
    sans-serif; font-size: 12px; 
    width: 5cm; /* ancho uniforme */ 
    padding: 6px; 
    margin: 3px 0 3px 0px; 
    box-sizing: border-box; 
    user-select: none;
  }
  
  /* En computadora, TODOS los inputs especiales tienen el MISMO ancho de 6cm */
  input[type="date"], 
  input[type="number"], 
  input[type="email"], 
  input[type="password"] { 
    width: 5cm; /* MISMO ANCHO que los comunes en computadora */
    box-sizing: border-box; 
  }
  
  h1 {
    font-size: 18px;
  }
  
  /* IMPORTANTE: ELIMINAR EFECTO FOCUS EN COMPUTADORA */
  input:not([type="date"]):focus, 
  input:focus, 
  select:focus, 
  textarea:focus { 
    font-size: 15px; /* MANTIENE el mismo tamaño */
    width: 5cm; /* MANTIENE el mismo ancho */
    padding: 6px; /* MANTIENE el mismo padding */
    outline: 1px solid #0094ff; /* Solo un borde sutil opcional */
  }
}
/* =========================
   BOTONES EN DOS FILAS DE 3 - MÓVIL Y ESCRITORIO
   ========================= */
.acciones-principales {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin: 15px 0;
  width: 100%;
}

/* Contenedor de cada fila */
.fila-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* Todos los botones iguales - ESTILOS BASE */
.acciones-principales .btn,
.acciones-principales button,
.acciones-principales .btn-presupuesto,
.acciones-principales .btn-primary,
.acciones-principales .btn-whatsapp,
.acciones-principales .btn-verificacion,
.acciones-principales .btn-adjuntar {
  flex: 1 1 auto;
  width: 3.5cm;
  min-width: 0;
  max-width: 100%;
  padding: 7px;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  white-space: nowrap;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

/* Colores específicos */
.acciones-principales .btn-presupuesto {
  background-color: #28a745;
}

.acciones-principales .btn-primary {
  background-color: #17a2b8;
}

.acciones-principales .btn-whatsapp {
  background-color: #25D366;
}

.acciones-principales .btn-verificacion {
  background-color: #ff9800;
}

.acciones-principales .btn-adjuntar {
  background-color: #6f42c1;
}

/* Efecto hover para todos los botones */
.acciones-principales .btn:hover,
.acciones-principales button:hover,
.acciones-principales .btn-presupuesto:hover,
.acciones-principales .btn-primary:hover,
.acciones-principales .btn-whatsapp:hover,
.acciones-principales .btn-verificacion:hover,
.acciones-principales .btn-adjuntar:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  opacity: 0.9;
}

/* =========================
   ESTILOS PARA COMPUTADORA
   ========================= */
@media (min-width: 769px) {
  .acciones-principales .btn,
  .acciones-principales button,
  .acciones-principales .btn-presupuesto,
  .acciones-principales .btn-primary,
  .acciones-principales .btn-whatsapp,
  .acciones-principales .btn-verificacion,
  .acciones-principales .btn-adjuntar {
    flex: 0 0 auto;
    width: 6cm;
    min-width: auto;
    padding: 10px;
    font-size: 15px;
    white-space: nowrap;
  }
  
  .acciones-principales {
    gap: 15px;
  }
  
  .fila-botones {
    gap: 15px;
  }
}

/* =========================
   RESPONSIVE PARA CELULAR
   ========================= */
@media (max-width: 768px) {
  .fila-botones {
    display: grid; /* CAMBIADO: Usamos grid para control exacto */
    grid-template-columns: repeat(3, 1fr); /* 3 columnas exactamente iguales */
    gap: 6px;
    width: 100%;
    padding: 0 4px;
  }
  
  /* Todos los botones ocupan el 100% de su celda */
  .acciones-principales .btn,
  .acciones-principales button,
  .acciones-principales .btn-presupuesto,
  .acciones-principales .btn-primary,
  .acciones-principales .btn-whatsapp,
  .acciones-principales .btn-verificacion,
  .acciones-principales .btn-adjuntar {
    flex: none; /* CAMBIADO: Desactivamos flex */
    width: 100%; /* CAMBIADO: Ocupan todo el ancho de su celda */
    min-width: 0;
    max-width: 100%;
    font-size: 11px;
    padding: 8px 4px;
    white-space: normal;
    word-break: break-word;
    text-align: center;
  }
  
  /* Para pantallas muy pequeñas, 2 botones por fila */
  @media (max-width: 400px) {
    .fila-botones {
      grid-template-columns: repeat(2, 1fr); /* 2 columnas iguales */
      gap: 5px;
    }
  }
}
/* =========================
   OTROS ESTILOS
   ========================= */
hr.gold-line {
  border: none;
  height: 2px;
  background-color: gold;
  margin: 20px 0;
}

/* CONTENEDOR GENERAL */
.botones {
  display: flex;
  flex-direction: column;
  align-items: center;
   gap: 10px;
  margin-top: -70px !important;
  margin-bottom: 3cm;
}

/* BOTÓN BASE */
.btn {
  background-color: #0094ff;
  border: none;
  padding: 6px;
  width: 4cm;
  color: white;
  cursor: pointer;
  font-size: 14px;
  border-radius: 6px;
}

/* VARIANTES */
.btn-whatsapp {
  background-color: #25D366;
}

.btn-verificacion {
  background-color: #ff9800;
}

.btn-informes {
  background-color: #607d8b;
}

/* ================= EXCEL ================= */

.excel-box {
  width: 90%;
  max-width: 690px;
  background: #f5f5f5;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  color: #000; /* LETRA NEGRA */
}

.excel-box h3 {
  margin-bottom: 15px;
  color: #000;
}

/* BOTONES EXCEL */
.btn-excel {
  padding: 10px 15px;
  margin: 5px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  color: white;
}

.btn-excel.azul {
  background: #2196F3;
}

.btn-excel.verde {
  background: #4CAF50;
}

.btn-excel.rojo {
  background: #f44336;
}

.nota-excel {
  font-size: 12px;
  color: #000;
  margin-top: 12px;
}

.formulario-extra {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.formulario-extra input {
  margin-right: 5px;
  width: 4cm;
}

.formulario-extra button {
  background-color: red;
  border: none;
  color: white;
  padding: 5px 10px;
  cursor: pointer;
}

form {
  margin-top: 0.5cm;  /* Espacio superior reducido */
}

.footer-info {
  margin-top: 60px;
  font-size: 14px;
  text-align: center;
}

#contenidoResultado > div {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

#contenidoResultado > div p {
  margin: 0;
  display: inline;
}

#contenidoResultado > div p:last-child {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: center;
}
  #resultadoFinal PDF {
    font-size: 12px; /* Cambiá el número al tamaño que quieras */  font-family: 'Poppins', sans-serif;
  }
.cuadro-flotante {
  position: fixed;
  top: 100px;
  right: 20px;
  width: 250px;
  max-height: 80vh;
  overflow-y: auto;
  background-color: #fff8dc;
  border: 2px solid #ffd54f;
  border-radius: 10px;
  padding: 10px;
  z-index: 1000;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  font-family: 'Poppins', sans-serif;
  color: #000;
  cursor: move;
    
}

.cuadro-flotante h3 {
  margin: 0 0 10px 0;
  text-align: center;
  font-size: 16px;
  color: #d32f2f;
}

.cuadro-flotante table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.cuadro-flotante th {
  background-color: #4bb7c6;
  padding: 5px;
  text-align: left;
}

.cuadro-flotante td {
  padding: 4px;
  border-bottom: 1px solid #ccc;
}


.evitar-corte {
  page-break-inside: avoid;
  break-inside: avoid;
}
.cuadro-simple {
  background-color: white;
  color: black;
  border: 1px solid black;
  border-radius: 6px;
  padding: 10px 15px;
  margin: 20px 0;
  font-size: 14px;
  text-align: left;
}

.cuadro-simple p {
  margin: 5px 0;
  font-family: 'helvetica'', sans-serif;
}

.cuadro-simple .nota-aclaracion {
  font-size: 13px;
  color: #555;



  
  
  /* ================= RESPONSIVE PARA CELULAR ================= */
@media (max-width: 768px) {
  /* Contenedor principal más compacto */
  .container {
    max-width: 100%;
    margin: 10px auto;
    padding: 10px;
    border-radius: 10px;
  }

  /* Inputs y selects ocupan todo el ancho disponible */
  input, select {
    width: 100%;
    max-width: 100%;
    padding: 10px;
    font-size: 14px;
    box-sizing: border-box; /* Para que el padding no desborde */
  }

  /* Ajuste de botones */
  .btn {
    width: 100%;
    max-width: 100%;
    padding: 12px;
    font-size: 14px;
  }

  /* Grupo de botones principales en columna pero con el mismo tamaño relativo */
  .acciones-principales {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  /* Excel box ocupa todo el ancho */
  .excel-box {
    max-width: 95%;
    padding: 15px;
  }

  /* Botones de Excel se adaptan */
  .btn-excel {
    width: 95%;
    margin: 5px 0;
    padding: 5px;
    font-size: 14px;
  }

  /* Formulario extra en columna */
  .formulario-extra {
    flex-direction: column;
    align-items: stretch;
  }

  .formulario-extra input {
    width: 100%;
    margin-right: 0;
    margin-bottom: 8px;
  }