/**
 * Inicio trámite público - estilos
 * Basado en `solicitud_poda.php` pero con colores del sistema de licencias.
 */

body {
  background-color: var(--gray-100);
}

.container {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

.header-banner {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  padding: 40px;
  border-radius: 15px 15px 0 0;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.header-banner h1 {
  font-size: 2.2rem;
  margin-bottom: 10px;
  line-height: 1.2;
}

.header-banner p {
  font-size: 1.05rem;
  opacity: 0.92;
}

.form-content {
  background: white;
  padding: 40px;
  border-radius: 0 0 15px 15px;
  box-shadow: var(--shadow-lg);
}

/* Alerts (mensajes visuales) */
.mb-4 { margin-bottom: 18px; }

.alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  line-height: 1.35;
}

.alert i {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 1.05rem;
  margin-top: 1px;
}

.alert-error {
  background: linear-gradient(180deg, rgba(254, 226, 226, 0.75), rgba(254, 242, 242, 0.75));
  border-color: rgba(239, 68, 68, 0.25);
  color: #7f1d1d;
}

.alert-error i {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.alert-success {
  background: linear-gradient(180deg, rgba(220, 252, 231, 0.75), rgba(240, 253, 244, 0.75));
  border-color: rgba(34, 197, 94, 0.25);
  color: #14532d;
}

.alert-success i {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

/* Inputs / selects (por defecto se ven "chicos" si no se fuerza width/padding) */
.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  color: var(--gray-700);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--gray-200);
  border-radius: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  transition: all 0.2s ease;
  background: white;
}

/* Mejoras para inputs file */
.form-group input[type="file"] {
  padding: 10px 12px;
  background: var(--gray-50);
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-sm);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 4px rgba(35, 45, 79, 0.12);
}

.form-group select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gray-500) 50%),
                    linear-gradient(135deg, var(--gray-500) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1em + 2px),
                       calc(100% - 15px) calc(1em + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.form-group small.text-muted {
  display: block;
  margin-top: 6px;
}

.section-title {
  font-size: 1.2rem;
  color: var(--primary-color);
  border-bottom: 2px solid var(--gray-200);
  padding-bottom: 10px;
  margin-bottom: 22px;
  margin-top: 28px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title:first-of-type {
  margin-top: 0;
}

.section-title i {
  background: var(--gray-100);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1rem;
}

.required {
  color: var(--danger-color);
}

.info-box {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 25px;
}

.info-box h3 {
  color: var(--primary-color);
  margin-bottom: 10px;
  font-size: 1.1rem;
  font-weight: 800;
}

.info-box ul {
  margin: 10px 0;
  padding-left: 20px;
}

.info-box li {
  margin: 6px 0;
  color: var(--gray-700);
}

.success-message {
  text-align: center;
  padding: 30px 20px;
}

.success-icon {
  font-size: 4.5rem;
  color: var(--success-color);
  margin-bottom: 16px;
}

.token-box {
  background: var(--gray-100);
  padding: 18px;
  border-radius: 12px;
  font-size: 1.6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  margin: 18px 0;
  letter-spacing: 2px;
  border: 2px dashed var(--gray-300);
  user-select: all;
}

.actions-center {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* Form layout similar a solicitud_poda */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 720px) {
  .container { margin: 18px auto; }
  .header-banner { padding: 26px; }
  .header-banner h1 { font-size: 1.6rem; }
  .form-content { padding: 22px; }
  .form-row { grid-template-columns: 1fr; }
}

/* Chips */
.chips-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--gray-300);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  transition: all .15s ease;
  background: var(--gray-50);
}

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 26px;
}

/* Las categorias pasaron de pildoras a tarjetas con icono (.cat-card). La clase .chip queda
   para "Tipo de licencia actual" en ampliacion, que si es una lista corta de letras. */

.chip:has(input:checked) {
  border-color: var(--primary-color);
  background: rgba(35, 45, 79, 0.08);
}

.chip:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Checkbox rows */
.check-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.check-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 3px;
}

.check-row input[type="radio"] {
  width: 20px;
  height: 20px;
  margin-top: 3px;
}

/* Checks a la derecha (domicilio) */
.domicilio-checks-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding-top: 30px; /* acompaña la altura del label+input de Dirección */
}

.domicilio-checks-right .check-row {
  max-width: 380px;
}

.domicilio-checks-right .check-row label {
  margin: 0;
}

/* Tarjeta compacta de declaraciones */
.domicilio-card {
  width: 100%;
  max-width: 380px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 10px 12px;
}

.domicilio-card__title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--gray-700);
  margin-bottom: 8px;
}

.domicilio-card__row {
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  line-height: 1.25;
}

.domicilio-card__row + .domicilio-card__row {
  margin-top: 8px;
}

.domicilio-card__row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 0;
}

.domicilio-card__row label strong {
  font-weight: 800;
}

.domicilio-card__row--opcional {
  color: var(--gray-700);
}

.domicilio-card__opcional-tag {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--gray-600);
  margin-right: 6px;
}

/* Upload colilla dentro de la tarjeta */
.domicilio-card__upload {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--gray-200);
}

.domicilio-card__upload-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--gray-700);
  margin-bottom: 6px;
}

.domicilio-card__upload input[type="file"] {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 2px solid var(--gray-200);
  background: white;
  font-size: 0.9rem;
}

@media (max-width: 720px) {
  .domicilio-checks-right {
    padding-top: 0;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .domicilio-card {
    max-width: 100%;
  }
}

/* Honeypot */
.hp { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

/* Botón grande */
.btn-lg {
  padding: 14px 34px !important;
  font-size: 1.1rem !important;
  border-radius: 12px !important;
}

/* Footer */
.public-footer {
  margin-top: 18px;
  text-align: center;
  color: var(--gray-600);
  font-size: 0.9rem;
}

.public-footer .footer-line {
  line-height: 1.4;
}

.public-footer .footer-contact {
  margin-top: 6px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.public-footer .footer-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}



/* ============================================================
   Documentacion opcional (bloque plegable)
   Separa visualmente lo que traba el envio de lo que no. El JS lo abre solo cuando el tipo de
   tramite o la categoria activan algun documento de adentro.
   ============================================================ */
.docs-opcionales {
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 10px;
  margin-top: 16px;
  background: var(--gray-50, #f9fafb);
}

.docs-opcionales > summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

/* Flecha propia: la nativa se ve distinta en cada navegador. */
.docs-opcionales > summary::-webkit-details-marker {
  display: none;
}

/* Flecha dibujada con bordes (no depende de ninguna fuente de iconos: antes mostraba "be"). */
.docs-opcionales > summary::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
}

.docs-opcionales[open] > summary::after {
  transform: rotate(-135deg);
}

/* Etiqueta "Opcional por ahora" junto al titulo del bloque. */
.docs-opcionales-chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #075985;
  white-space: nowrap;
}

/* Aclaracion: opcional en este paso, pero se pide igual mas adelante. */
.docs-opcionales-aclaracion {
  margin: 12px 0 16px;
  padding: 12px 14px;
  background: #fff8e1;
  border: 1px solid #ffe08a;
  border-left: 4px solid #f39302;
  border-radius: 8px;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Subtitulo que separa los documentos de cada grupo dentro del bloque. */
.docs-opcionales-grupo {
  margin: 18px 0 8px;
  font-size: 0.95rem;
  font-weight: 700;
}

.docs-opcionales > summary:hover {
  background: var(--gray-100, #f3f4f6);
  border-radius: 10px;
}

.docs-opcionales-cuerpo {
  padding: 4px 16px 16px;
  border-top: 1px solid var(--gray-200, #e5e7eb);
}

#docsOpcionalesPista {
  font-weight: 600;
  font-size: 0.82rem;
}

/* Marca de documento ya cargado desde el celular. */
.doc-desde-movil {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e7f6ec;
  color: #14683c;
  font-size: 0.8rem;
  font-weight: 700;
}

/* ============================================================
   Aviso para generar la boleta CENAT

   Es uno de los tres documentos que traban el envio y se saca en un sitio externo. Como linea
   de texto chica pasaba inadvertido, asi que se destaca con la franja naranja de la marca.
   ============================================================ */
.aviso-cenat {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 14px 16px;
  background: #FFF6E8;
  border: 1px solid #F8D9A6;
  border-left: 4px solid #F39302;
  border-radius: 8px;
}

.aviso-cenat-texto {
  flex: 1 1 260px;
  font-size: 0.87rem;
  line-height: 1.5;
  color: #6B4A12;
}

.aviso-cenat-texto strong {
  display: block;
  margin-bottom: 2px;
  color: #0D212F;
  font-size: 0.93rem;
}

.aviso-cenat-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 11px 18px;
  border-radius: 8px;
  background: #F39302;
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(243, 147, 2, 0.35);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.aviso-cenat-btn:hover,
.aviso-cenat-btn:focus {
  background: #D97F00;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(243, 147, 2, 0.45);
}

/* Se marca que el enlace abre en otra pestana, sin depender solo del color. */
.aviso-cenat-ext {
  font-size: 0.72rem;
  opacity: 0.85;
}

@media (max-width: 520px) {
  .aviso-cenat-btn {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================================
   Categorias de licencia: tarjeta con icono

   La letra sola no le decia nada al ciudadano. Cada categoria muestra el icono del vehiculo, la
   letra, el nombre que usa el resto del sistema (nombreTipoExamen) y una linea de ayuda.
   ============================================================ */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.cat-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 40px 14px 14px;   /* espacio a la derecha para el check */
  border: 2px solid var(--gray-300, #d1d5db);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.cat-card:hover {
  border-color: #056D84;
  box-shadow: 0 2px 8px rgba(5, 109, 132, 0.12);
}

.cat-card-icono {
  flex: 0 0 auto;
  font-size: 1.6rem;
  line-height: 1;
  color: #056D84;
  margin-top: 2px;
}

.cat-card-texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cat-card-letra {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0D212F;
  line-height: 1.2;
}

.cat-card-nombre {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0D212F;
  line-height: 1.25;
}

.cat-card-detalle {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--gray-600, #4b5563);
  line-height: 1.3;
}

/* El checkbox real queda arriba a la derecha: es accesible y navegable con teclado. */
.cat-card-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 17px;
  height: 17px;
  accent-color: #056D84;
  cursor: pointer;
  margin: 0;
}

.cat-card:has(input:checked) {
  border-color: #056D84;
  background: rgba(5, 109, 132, 0.06);
}

/* Deshabilitada por el tipo de tramite o por la edad: el JS tambien la atenua. */
.cat-card:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--gray-50, #f9fafb);
}

.cat-card:has(input:disabled):hover {
  border-color: var(--gray-300, #d1d5db);
  box-shadow: none;
}

/* Foco visible para quien navega con teclado. */
.cat-card:focus-within {
  outline: 2px solid #056D84;
  outline-offset: 2px;
}

@media (max-width: 860px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .cat-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   Grupos de categorias: nacionales vs jurisdiccionales

   Que una licencia valga en todo el pais o solo en Neuquen es informacion que el ciudadano
   necesita ANTES de elegir, no despues. Por eso las tarjetas van agrupadas y no en una lista
   plana donde todas parecen equivalentes.
   ============================================================ */
.cat-grupo + .cat-grupo {
  margin-top: 20px;
}

.cat-grupo-titulo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--gray-200, #e5e7eb);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #0D212F;
}

.cat-grupo-titulo small {
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gray-600, #4b5563);
}

.cat-grupo--nacional .cat-grupo-titulo {
  border-bottom-color: #056D84;
}

.cat-grupo--jurisdiccional .cat-grupo-titulo {
  border-bottom-color: #F39302;
}

/* ============================================================
   Aviso de comunicacion por mail (pantalla de exito)

   Es la unica pantalla donde se le puede decir al ciudadano que de aca en mas todo va por
   correo. Si no queda claro, se vuelve al municipio a preguntar por el estado del tramite.
   ============================================================ */
.aviso-mail {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  margin: 20px auto 0;
  max-width: 520px;
  padding: 16px 18px;
  background: #E9F4F7;
  border: 1px solid #B7DCE5;
  border-left: 4px solid #056D84;
  border-radius: 10px;
}

.aviso-mail-icono {
  flex: 0 0 auto;
  font-size: 1.5rem;
  line-height: 1;
  color: #056D84;
  margin-top: 2px;
}

.aviso-mail-texto {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.aviso-mail-texto strong {
  font-size: 0.95rem;
  color: #0D212F;
  /* El mail puede ser largo y no tiene espacios donde cortar. */
  overflow-wrap: anywhere;
}

.aviso-mail-texto span {
  font-size: 0.85rem;
  line-height: 1.45;
  color: #234A55;
}

/* La linea que importa: que de aca en mas todo llega por correo. */
.aviso-mail-clave {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed #B7DCE5;
  font-weight: 700;
  color: #0D212F !important;
}

.aviso-mail-spam {
  font-size: 0.8rem !important;
  color: #5A7A84 !important;
}

@media (max-width: 520px) {
  .aviso-mail {
    flex-direction: column;
    gap: 10px;
  }
}

/* ============================================================
   Codigo de seguimiento + boton copiar (pantalla de exito)

   Son doce caracteres que la persona tiene que guardar: transcribirlos a mano es donde se
   cometen los errores que despues llegan como "mi codigo no existe".
   ============================================================ */
.token-fila {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px auto 0;
}

.token-copiar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border: 2px solid #056D84;
  border-radius: 10px;
  background: #fff;
  color: #056D84;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.token-copiar:hover,
.token-copiar:focus {
  background: #056D84;
  color: #fff;
}

.token-copiar:focus-visible {
  outline: 2px solid #0D212F;
  outline-offset: 2px;
}

/* Confirmacion breve de que se copio. */
.token-copiar--ok,
.token-copiar--ok:hover {
  background: #14683c;
  border-color: #14683c;
  color: #fff;
}

.token-copiado {
  display: none;
  margin-top: 8px;
  font-size: 0.83rem;
  font-weight: 600;
  color: #5A7A84;
}

.token-copiado--ok {
  color: #14683c;
}

@media (max-width: 520px) {
  .token-fila {
    flex-direction: column;
  }
  .token-copiar {
    justify-content: center;
    padding: 12px 18px;
  }
}

/* Marca de categoria jurisdiccional en "Amplia a": avisa de antemano cuales obligan a la
   declaracion jurada, en vez de que el checkbox aparezca de la nada al tildarlas. */
.cat-card-juris {
  align-self: flex-start;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #FFF1DC;
  color: #8A5A08;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.cat-card--juris:has(input:checked) .cat-card-juris {
  background: #F39302;
  color: #fff;
}

/* ============================================================
   Recuadros de caso: documentación obligatoria de la renovación fuera de término y aviso de la
   licencia física. Van fuera del bloque plegable para que no se pasen por alto.
   ============================================================ */
.docs-obligatorios-caso {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid #fca5a5;
  border-left: 4px solid #dc2626;
  border-radius: 10px;
  background: #fef2f2;
  line-height: 1.5;
}

.docs-obligatorios-caso .docs-obligatorios-titulo {
  font-weight: 800;
  color: #991b1b;
  margin-bottom: 6px;
}

.docs-obligatorios-caso p {
  margin: 0 0 12px;
}

.docs-obligatorios-caso .form-group {
  margin-bottom: 8px;
}

/* El aviso de la licencia física es informativo, no un requisito bloqueante. */
.docs-obligatorios-aviso {
  background: #fff8e1;
  border-color: #ffe08a;
  border-left-color: #f39302;
}