/* ============================================================
   AUTORIZAR COMO HOJA — modelo H elegido por el usuario (13/08)
   (mockup_autorizar.html: papel cálido de la G + membrete +
   separadores --- + paneles de modalidad a lo ancho).
   TODO escopado a body.pagina-hoja: solo autorizar.html.
   Solo estilos: no cambia IDs ni la lógica de autorizar.js.
   ============================================================ */

/* Escritorio gris azulado detrás de la hoja.
   (El navy del mockup G no funcionaba dentro del sistema real: quedaba
   pegado al sidebar navy sin separación y el topbar blanco cortaba a
   destono. La hoja es idéntica; cambió solo el escritorio.) */
body.pagina-hoja .content-area {
  background: #d9e0e8;
  padding: 30px 38px 60px;
}

/* El topbar se integra al escritorio: mismo tono, sin franja blanca */
body.pagina-hoja .topbar {
  background: #d9e0e8;
  border-bottom: none;
  box-shadow: none;
}

/* Tarjeta de bienvenida del prestador: alineada con la hoja */
body.pagina-hoja .content-area > .alert {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* ── La hoja de papel ── */
body.pagina-hoja .content-area > .card {
  max-width: 980px;
  margin: 0 auto 30px;
  background: #fbf8f1;
  border: none;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(10, 37, 64, 0.10), 0 14px 40px rgba(10, 37, 64, 0.18);
  position: relative;
  overflow: hidden;
  padding: 34px 46px 38px;
}
body.pagina-hoja .content-area > .card:hover {
  transform: none;
  box-shadow: 0 1px 2px rgba(10, 37, 64, 0.10), 0 14px 40px rgba(10, 37, 64, 0.18);
}
/* firma degradé arriba de la hoja */
body.pagina-hoja .content-area > .card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #34d399 0%, #00c9b7 35%, #2456c9 70%, #4527a0 100%);
}

/* ── Membrete ── */
body.pagina-hoja .membrete-hoja {
  text-align: center;
  border-bottom: 1px solid #d8d0be;
  padding: 6px 0 18px;
  margin-bottom: 6px;
}
body.pagina-hoja .membrete-hoja .marca {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #0A2540;
}
body.pagina-hoja .membrete-hoja .rubro {
  font-size: 0.66rem;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #5a6b7b;
  margin-top: 3px;
}
body.pagina-hoja .membrete-hoja .filete {
  width: 70px;
  height: 3px;
  background: linear-gradient(90deg, #34d399 0%, #00c9b7 35%, #2456c9 70%, #4527a0 100%);
  margin: 12px auto 0;
  border-radius: 2px;
}

/* ── Título de la hoja ── */
body.pagina-hoja .content-area > .card > .card-header {
  background: transparent;
  border-bottom: none;
  text-align: center;
  padding: 16px 0 2px;
  border-radius: 0;
}
body.pagina-hoja .content-area > .card > .card-header h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #0A2540;
  letter-spacing: 0.4px;
}
body.pagina-hoja .content-area > .card > .card-header h3 i { color: #00A86B; }
body.pagina-hoja .content-area > .card > .card-body { padding: 12px 0 0; }

/* ── Secciones: tarjetas internas transparentes + separador --- ── */
body.pagina-hoja #autorizacionForm > .card {
  background: transparent;
  border: none;
  box-shadow: none;
  margin-bottom: 8px;
  padding: 0;
}
body.pagina-hoja #autorizacionForm > .card:hover {
  box-shadow: none;
  transform: none;
}
/* separador de guiones con los colores Dynamicoz entre secciones */
body.pagina-hoja #autorizacionForm > .card:not(:first-child)::before {
  content: '';
  display: block;
  height: 2px;
  margin: 12px 0 22px;
  background: linear-gradient(90deg, #34d399 0%, #00c9b7 35%, #2456c9 70%, #4527a0 100%);
  opacity: 0.5;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 24px);
  mask: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 24px);
}
body.pagina-hoja #autorizacionForm > .card > .card-header {
  background: transparent;
  border-bottom: none;
  padding: 0 0 4px;
}
body.pagina-hoja #autorizacionForm > .card > .card-header h5 {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #0A2540;
}
body.pagina-hoja #autorizacionForm > .card > .card-header h5 i {
  color: #00A86B;
  font-size: 0.8rem;
  margin-right: 4px;
}
body.pagina-hoja #autorizacionForm > .card > .card-body { padding: 14px 0 8px; }

/* ── Campos: blancos sobre el papel, foco verde ── */
body.pagina-hoja .form-control,
body.pagina-hoja .form-select {
  background-color: #fff;
  border: 1px solid #ddd6c6;
  border-radius: 8px;
  color: #0A2540;
}
body.pagina-hoja .form-control:focus,
body.pagina-hoja .form-select:focus {
  border-color: #00A86B;
  box-shadow: 0 0 0 3px rgba(0, 168, 107, 0.12);
}
body.pagina-hoja .form-control[readonly] {
  background-color: #f8f4e9;
  color: #5a6b7b;
}
body.pagina-hoja .input-group-text {
  background-color: #f4efe3;
  border: 1px solid #ddd6c6;
}
body.pagina-hoja .form-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #5a6b7b;
  margin-bottom: 5px;
}
body.pagina-hoja textarea.form-control { border-radius: 8px; }

/* ── Tabla de prácticas: líneas de formulario impreso ── */
body.pagina-hoja .practicas-table .table {
  --bs-table-bg: transparent;
  background: transparent;
}
body.pagina-hoja .practicas-table th {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #5a6b7b;
  border-bottom: 1.5px solid #0A2540;
  background: transparent;
}
body.pagina-hoja .practicas-table td {
  border-bottom: 1px dashed #e0d9c8;
  background: transparent;
  color: #33475b;
}

/* ── Interruptores de modalidad (fichas del modelo H) ── */
body.pagina-hoja .opcion-toggle {
  background-color: #fff;
  border: 1px solid #ddd6c6;
  border-radius: 9px;
}
body.pagina-hoja .opcion-toggle:hover { border-color: #b9ac8d; }
body.pagina-hoja .opcion-toggle .opcion-label {
  color: #0A2540;
  font-size: 0.8rem;
}
body.pagina-hoja .opcion-toggle .opcion-label i { color: var(--c, #00A86B); }
body.pagina-hoja .opcion-toggle .form-check-input:checked {
  background-color: var(--c, #00A86B);
  border-color: var(--c, #00A86B);
}
body.pagina-hoja .opcion-toggle:has(.form-check-input:checked) {
  border-color: var(--c, #00A86B);
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(10, 37, 64, 0.07);
}
body.pagina-hoja .opcion-toggle:has(.form-check-input:checked) .opcion-label,
body.pagina-hoja .opcion-toggle:has(.form-check-input:checked) .opcion-label i {
  color: var(--c, #00A86B);
}

/* ── Paneles de modalidad a lo ancho ── */
body.pagina-hoja .paneles-modalidad > div > .card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #e2dbc9 !important;
  border-left: 3px solid var(--c, #00A86B) !important;
  border-radius: 8px;
  box-shadow: none;
}
body.pagina-hoja .paneles-modalidad > div > .card:hover {
  box-shadow: none;
  transform: none;
}
body.pagina-hoja .paneles-modalidad .card-header {
  background-color: transparent !important;
  border-bottom: none;
  padding: 12px 16px 0 !important;
  color: var(--c, #00A86B) !important;
  border-radius: 8px 8px 0 0;
}
body.pagina-hoja .paneles-modalidad .card-header small {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
body.pagina-hoja .paneles-modalidad .card-body { padding: 12px 16px 16px !important; }

/* OP: los 3 campos en una fila */
body.pagina-hoja #campoOPE .card-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px 18px;
}
body.pagina-hoja #campoOPE .card-body > div { margin-bottom: 0 !important; }

/* Domicilio: aviso a lo ancho, dirección amplia + adjuntos al lado */
body.pagina-hoja #campoDomicilioDireccion .card-body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2px 18px;
}
body.pagina-hoja #campoDomicilioDireccion .aviso-adjuntos { grid-column: 1 / -1; }
body.pagina-hoja .aviso-adjuntos {
  background: #fdf1f0;
  border: 1px solid #efc9c5;
  color: #a33a30;
  border-radius: 7px;
}

/* ── Mobile: hoja al borde y grillas apiladas ── */
@media (max-width: 900px) {
  body.pagina-hoja .content-area { padding: 16px 12px 40px; }
  body.pagina-hoja .content-area > .card { padding: 24px 18px 26px; }
  body.pagina-hoja #campoOPE .card-body,
  body.pagina-hoja #campoDomicilioDireccion .card-body { grid-template-columns: 1fr; }
}