/* =============================================================================
   Proyecto : AgendaWebCitas - FrontEnd
   Archivo  : css/35-page01-especialidad-density.css
   Versión  : v3 (completa y corregida)
   Alcance  : SOLO Página 01 — Selección por especialidad (.p01esp)
   Objetivo :
     - Densidad ~90% (menos vacío, controles compactos)
     - Mantener tipografías del proyecto (sin cambiar familia/paleta)
     - Corregir alineación del botón “Volver” (alineado al eje del form)
   Carga    : Después de css/34-page05-density.css
   ============================================================================= */

/* -----------------------------------------
   0) Variables de eje (coherencia visual)
------------------------------------------ */
:root{
  --p01esp-shell: 780px;
  --p01esp-form: 580px;     /* eje que usa input + botón */
}

/* -----------------------------------------
   1) Contenedor: subir el bloque (menos vacío)
------------------------------------------ */
.p01esp{
  padding: 42px 18px 28px !important;      /* más “pro”, menos aire */
  min-height: calc(100vh - 76px) !important;
  box-sizing: border-box !important;
}

@media (max-width: 520px){
  .p01esp{
    padding: 38px 16px 26px !important;
  }
}

/* Shell */
.p01esp__shell{
  max-width: var(--p01esp-shell) !important; /* 820 -> 780 */
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Card */
.p01esp__card{
  padding: 20px !important;        /* 26 -> 20/22 */
  border-radius: 15px !important;
  box-sizing: border-box !important;
}

/* Título */
.p01esp__title{
  margin: 0 0 12px 0 !important;
  font-size: 15px !important;      /* 16 -> 15 */
}

/* Form: eje fijo */
.p01esp__form{
  max-width: var(--p01esp-form) !important; /* 620 -> 580 */
  gap: 14px !important;                    /* 16 -> 14 */
}

/* -----------------------------------------
   2) Autocomplete: input + iconos + lista
------------------------------------------ */
.p01esp__input{
  height: 44px !important;                  /* 48 -> 44 */
  padding: 0 42px 0 12px !important;
  border-radius: 11px !important;
  font-size: 15px !important;
  box-sizing: border-box !important;
}

.p01esp-ico{
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  font-size: 17px !important;
}

.p01esp-ico-drop{ right: 6px !important; }
.p01esp-ico-clear{ right: 38px !important; font-size: 20px !important; }

.p01esp__list{
  margin-top: 7px !important;
  border-radius: 11px !important;
  max-height: 240px !important;
}

.p01esp__list .autocomplete-item{
  padding: 10px 12px !important;
  font-size: 14px !important;
}

.p01esp__list .autocomplete-empty{
  padding: 10px 12px !important;
  font-size: 13px !important;
}

/* Mensajes */
.p01esp__msg{
  padding: 9px 11px !important;
  font-size: 12.5px !important;
}

/* -----------------------------------------
   3) Botón Buscar Hora (coherente con flujo)
------------------------------------------ */
.p01esp__btn{
  width: 320px !important;         /* 340 -> 320 */
  height: 52px !important;         /* 58 -> 52 */
  border-radius: 13px !important;
  font-size: 16px !important;      /* 18 -> 16 */
  letter-spacing: 0.45px !important;
}

/* Mobile: full width tocable */
@media (max-width: 520px){
  .p01esp__card{ padding: 18px 16px !important; }
  .p01esp__form{ max-width: 420px !important; }
  .p01esp__btn{
    width: 100% !important;
    max-width: 420px !important;
    min-height: 44px !important;
  }
}

/* =============================================================================
   4) FIX DEFINITIVO: “Volver” alineado al eje del form
   Tu proyecto usa dos patrones:
   A) .p01esp__volver (según tu CSS base)
   B) .volver-container + .btn-volver (según tu UI real)
   Aquí soportamos ambos.
   ============================================================================= */

/* A) Si existe .p01esp__volver */
.p01esp__volver{
  width: 100% !important;
  max-width: var(--p01esp-form) !important;
  margin: 10px auto 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
}

/* B) Patrón real: .volver-container (encapsulado bajo .p01esp) */
.p01esp .volver-container{
  width: 100% !important;
  max-width: var(--p01esp-form) !important;
  margin: 10px auto 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
}

/* El botón en sí: sin margen raro a la izquierda */
.p01esp .volver-container .btn-volver,
.p01esp__volver .btn-volver{
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Mobile: mismo eje que el form mobile */
@media (max-width: 520px){
  .p01esp__volver,
  .p01esp .volver-container{
    max-width: 420px !important;
  }
}

/* =============================================================================
   P01 Especialidad — Volver alineado al BORDE IZQUIERDO de la tarjeta
   (no al form, no centrado)
   ============================================================================= */

/* 1) Eje: mismo ancho que la card (la card vive dentro de .p01esp__shell) */
.p01esp__shell{
  position: relative !important;
}

/* Si el volver está dentro del flujo de especialidad */
.p01esp .volver-container,
.p01esp__volver{
  width: 100% !important;
  max-width: var(--p01esp-shell, 780px) !important; /* mismo eje de la card */
  margin-left: auto !important;
  margin-right: auto !important;

  display: flex !important;
  justify-content: flex-start !important; /* a la izquierda */
  padding-left: 0 !important;             /* alineado al borde */
}

/* 2) Variante robusta: si el volver está fuera del .p01esp__shell,
      lo alineamos igual usando el contexto del app-content */
.app-content:has(.p01esp__card) .volver-container{
  width: 100% !important;
  max-width: var(--p01esp-shell, 780px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  justify-content: flex-start !important;
  padding-left: 0 !important;
}

/* 3) Evitar margen raro del propio botón */
.p01esp .volver-container .btn-volver,
.app-content:has(.p01esp__card) .volver-container .btn-volver{
  margin-left: 0 !important;
  padding-left: 0 !important;
}