/* ============================================================
   PATRÓN PAPEL DEL SISTEMA — 13/08
   Generalización del look "hoja sobre escritorio" que Pablo
   eligió para autorizar.html (modelo H de mockup_autorizar.html):
   escritorio gris azulado, tarjeta principal como hoja de papel
   cálido #fbf8f1 con firma degradé, campos blancos de borde
   cálido y tablas estilo formulario impreso.

   TODO escopado a body.pagina-papel. Lo cargan todas las páginas
   internas del sidebar MENOS autorizar.html, que conserva su
   css/autorizar-hoja.css propio (mismo lenguaje, reglas a medida).
   OJO: si se cambia el patrón, tocar LOS DOS archivos.

   Los modales y los card-header con clases bg-* quedan como
   están (son diálogos / avisos, no papel del escritorio).
   ============================================================ */

/* ── Escritorio gris azulado + topbar integrado ── */
body.pagina-papel .content-area {
  background: #d9e0e8;
  padding: 30px 38px 60px;
}

body.pagina-papel .topbar {
  background: #d9e0e8;
  border-bottom: none;
  box-shadow: none;
}

/* Avisos sueltos (ej. bienvenida del prestador): alineados con la hoja */
body.pagina-papel .content-area > .alert {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ── La hoja de papel: tarjetas directas del escritorio ── */
body.pagina-papel .content-area > .card,
body.pagina-papel .content-area > form > .card,
body.pagina-papel .config-panel > .card {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  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;
  padding: 26px 34px 30px;
}
body.pagina-papel .content-area > .card:hover,
body.pagina-papel .content-area > form > .card:hover,
body.pagina-papel .config-panel > .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 PRIMERA hoja (una por pantalla).
   Sin overflow:hidden para no recortar dropdowns: la firma
   redondea sus propias esquinas. */
body.pagina-papel .content-area > .card:first-of-type::before,
body.pagina-papel .content-area > form:first-of-type > .card:first-of-type::before,
body.pagina-papel .config-panel > .card:first-of-type::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, #34d399 0%, #00c9b7 35%, #2456c9 70%, #4527a0 100%);
}

/* ── Sin título grande dentro de la hoja: la ubicación la da la miga
      "SECCIÓN › Página" del topbar (la arma nav.js). El header de la
      tarjeta solo sobrevive si tiene botones/controles, como fila de
      acciones alineada a la derecha. ── */
body.pagina-papel .content-area > .card > .card-header:not([class*="bg-"]),
body.pagina-papel .content-area > form > .card > .card-header:not([class*="bg-"]),
body.pagina-papel .config-panel > .card > .card-header:not([class*="bg-"]) {
  background: transparent;
  border-bottom: none;
  border-radius: 0;
  padding: 0 0 6px;
  justify-content: flex-end !important;
}
body.pagina-papel .content-area > .card > .card-header:not([class*="bg-"]) h1,
body.pagina-papel .content-area > .card > .card-header:not([class*="bg-"]) h2,
body.pagina-papel .content-area > .card > .card-header:not([class*="bg-"]) h3,
body.pagina-papel .content-area > .card > .card-header:not([class*="bg-"]) h4,
body.pagina-papel .content-area > .card > .card-header:not([class*="bg-"]) h5,
body.pagina-papel .content-area > .card > .card-header:not([class*="bg-"]) h6,
body.pagina-papel .content-area > form > .card > .card-header:not([class*="bg-"]) h1,
body.pagina-papel .content-area > form > .card > .card-header:not([class*="bg-"]) h2,
body.pagina-papel .content-area > form > .card > .card-header:not([class*="bg-"]) h3,
body.pagina-papel .content-area > form > .card > .card-header:not([class*="bg-"]) h4,
body.pagina-papel .content-area > form > .card > .card-header:not([class*="bg-"]) h5,
body.pagina-papel .content-area > form > .card > .card-header:not([class*="bg-"]) h6,
body.pagina-papel .config-panel > .card > .card-header:not([class*="bg-"]) h1,
body.pagina-papel .config-panel > .card > .card-header:not([class*="bg-"]) h2,
body.pagina-papel .config-panel > .card > .card-header:not([class*="bg-"]) h3,
body.pagina-papel .config-panel > .card > .card-header:not([class*="bg-"]) h4,
body.pagina-papel .config-panel > .card > .card-header:not([class*="bg-"]) h5,
body.pagina-papel .config-panel > .card > .card-header:not([class*="bg-"]) h6 {
  display: none;
}
/* Header que solo tenía el título: desaparece entero */
body.pagina-papel .content-area > .card > .card-header:not([class*="bg-"]):not(:has(button, .btn, a, input, select, label)),
body.pagina-papel .content-area > form > .card > .card-header:not([class*="bg-"]):not(:has(button, .btn, a, input, select, label)),
body.pagina-papel .config-panel > .card > .card-header:not([class*="bg-"]):not(:has(button, .btn, a, input, select, label)) {
  display: none;
}
body.pagina-papel .content-area > .card > .card-body,
body.pagina-papel .content-area > form > .card > .card-body,
body.pagina-papel .config-panel > .card > .card-body {
  padding: 18px 0 0;
}

/* ── Campos: blancos sobre el papel, foco verde ──
   (También alcanzan a los modales: el borde cálido es sutil y
   no desentona sobre blanco.) */
body.pagina-papel .form-control,
body.pagina-papel .form-select {
  background-color: #fff;
  border: 1px solid #ddd6c6;
  border-radius: 8px;
  color: #0A2540;
}
body.pagina-papel .form-control:focus,
body.pagina-papel .form-select:focus {
  border-color: #00A86B;
  box-shadow: 0 0 0 3px rgba(0, 168, 107, 0.12);
}
body.pagina-papel .form-control[readonly] {
  background-color: #f8f4e9;
  color: #5a6b7b;
}
body.pagina-papel .input-group-text {
  background-color: #f4efe3;
  border: 1px solid #ddd6c6;
}
body.pagina-papel .form-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #5a6b7b;
  margin-bottom: 5px;
}

/* ── Tablas dentro de la hoja: líneas de formulario impreso ──
   (Solo en las tarjetas directas: las tablas de los modales
   conservan su estilo.) */
body.pagina-papel .content-area > .card .table,
body.pagina-papel .content-area > form > .card .table,
body.pagina-papel .config-panel > .card .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.45);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.65);
  background: transparent;
}
body.pagina-papel .content-area > .card .table th,
body.pagina-papel .content-area > form > .card .table th,
body.pagina-papel .config-panel > .card .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-papel .content-area > .card .table td,
body.pagina-papel .content-area > form > .card .table td,
body.pagina-papel .config-panel > .card .table td {
  border-bottom: 1px dashed #e0d9c8;
  background: transparent;
  color: #33475b;
}

/* ── Mobile: hoja al borde ── */
@media (max-width: 900px) {
  body.pagina-papel .content-area { padding: 16px 12px 40px; }
  body.pagina-papel .content-area > .card,
  body.pagina-papel .content-area > form > .card,
  body.pagina-papel .config-panel > .card { padding: 20px 16px 22px; }
}