/* ═══════════════════════════════════════════
   AdminDental — Custom UI CSS
   Diseño: Clínico Moderno (Azul)
   ═══════════════════════════════════════════ */

/* ── Variables ── */
:root {
  /* El azul "a secas", sin sufijo: lo usan siete plantillas para textos,
     iconos y `accent-color`. Es un alias de la 600 —la misma que pinta
     `.ad-btn-primary`— y no un color aparte, para que las dos no puedan
     separarse el dia que se retoque la paleta.

     Estuvo sin definir desde el principio y no lo delataba nadie: una
     `var()` sin valor ni respaldo no da error, deja la propiedad en `unset`
     y, dentro de una declaracion compuesta, la anula entera. Eso dejaba la
     pestana activa de la ficha del paciente sin subrayado. Lo vigila
     `VariablesCssDefinidasTest`. */
  --ad-primary:     var(--ad-primary-600);
  --ad-primary-900: #1e3a8a;
  --ad-primary-800: #1e40af;
  --ad-primary-600: #2563eb;
  --ad-primary-400: #3b82f6;
  --ad-primary-300: #60a5fa;
  --ad-primary-100: #dbeafe;
  --ad-primary-50:  #eff6ff;
  --ad-bg-app:      #f0f4ff;
  --ad-bg-page:     #e8eef7;
  --ad-border:      #e0e7ff;
  --ad-success:     #22c55e;
  --ad-success-bg:  #dcfce7;
  --ad-warning:     #f59e0b;
  --ad-warning-bg:  #fef3c7;
  --ad-danger:      #ef4444;
  --ad-danger-bg:   #fee2e2;
  --ad-muted:       #94a3b8;
  --ad-text:        #1e293b;
  --ad-text-soft:   #374151;
  --ad-sidebar-w:   210px;
  --ad-topbar-h:    52px;
}

/* ── Reset / base ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--ad-bg-app);
  color: var(--ad-text);
  margin: 0;
}

/* ── App shell ── */
.ad-app {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ── */
.ad-sidebar {
  width: var(--ad-sidebar-w);
  background: var(--ad-primary-900);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 200;
}

.ad-sb-logo {
  padding: 20px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.ad-sb-logo .brand {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  display: block;
}
.ad-sb-logo .tagline {
  font-size: 0.62rem;
  color: var(--ad-primary-300);
  margin-top: 2px;
  display: block;
}

.ad-sb-section {
  padding: 14px 14px 5px;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ad-primary-400);
}

.ad-sb-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.62);
  cursor: pointer;
  border-left: 3px solid transparent;
  margin: 1px 8px;
  border-radius: 7px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.ad-sb-item:hover {
  background: rgba(255,255,255,0.09);
  color: #fff;
  text-decoration: none;
}
.ad-sb-item.active {
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-weight: 600;
  border-left-color: var(--ad-primary-300);
}
.ad-sb-item .sb-icon {
  font-size: 15px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* Un bloqueo de agenda bajo los huecos libres del dashboard. */
.ad-bloqueo-dia {
  margin-top: 6px;
  font-size: 0.7rem;
  color: var(--ad-text-soft);
}

/* Aviso de respaldo viejo: rojo claro sobre el azul oscuro del menu, para
   que no se confunda con un elemento mas. Solo sale si algo va mal. */
.ad-sb-aviso-respaldo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 8px;
  padding: 8px 12px;
  border-radius: 7px;
  background: var(--ad-danger-bg);
  color: #991b1b;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Sidebar groups (collapsible) */
.ad-sb-group { margin: 1px 8px; }
.ad-sb-group > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.62);
  cursor: pointer;
  border-left: 3px solid transparent;
  border-radius: 7px;
  list-style: none;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}
.ad-sb-group > summary::-webkit-details-marker { display: none; }
.ad-sb-group > summary:hover {
  background: rgba(255,255,255,0.09);
  color: #fff;
}
.ad-sb-group.active > summary {
  color: #fff;
  font-weight: 600;
}
.ad-sb-group > summary .sb-caret {
  margin-left: auto;
  font-size: 10px;
  transition: transform 0.2s;
  color: rgba(255,255,255,0.35);
}
.ad-sb-group[open] > summary .sb-caret { transform: rotate(90deg); }

.ad-sb-subitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 40px;
  font-size: 0.74rem;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  border-radius: 6px;
  margin: 1px 0;
  transition: background 0.15s, color 0.15s;
  border-left: 3px solid transparent;
}
.ad-sb-subitem:hover {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.85);
  text-decoration: none;
}
.ad-sb-subitem.active {
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-weight: 600;
  border-left-color: var(--ad-primary-300);
}

/* Rotulo de subgrupo dentro de un grupo del menu. «Catalogo» junta dos cosas
   distintas —lo que la clinica COBRA (servicios) y lo que COMPRA (articulos)—
   y sin un rotulo en medio los siete enlaces se leen como una lista sola.
   Alineado a 40px como `.ad-sb-subitem`, para que el texto caiga en la misma
   columna que el de los enlaces que encabeza. */
.ad-sb-subhead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 40px;
  margin: 10px 0 2px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
}
.ad-sb-subhead::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.1);
}
/* El primero va pegado al titulo del grupo: ahi el hueco ya lo pone el summary. */
.ad-sb-group > summary + .ad-sb-subhead { margin-top: 4px; }

/* El nombre del paciente que lleva a su expediente. Hereda el color de donde
   cae —la celda de la tabla, el titulo del detalle— y solo se subraya al pasar
   por encima o al recibir el foco: un azul de enlace por fila competiria en la
   tabla de citas con los estados, los importes y los cinco botones de accion. */
.ad-enlace-ficha { color: inherit; text-decoration: none; }
.ad-enlace-ficha:hover,
.ad-enlace-ficha:focus-visible { color: inherit; text-decoration: underline; }

.ad-sb-badge {
  margin-left: auto;
  background: var(--ad-danger);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  line-height: 1.4;
}

.ad-sb-spacer { flex: 1; }

/* Pie del menu (aviso de respaldos + usuario), pegado abajo aunque el menu
   haga scroll. Lleva el fondo del menu o las opciones se verian por debajo. */
.ad-sb-pie {
  position: sticky;
  bottom: 0;
  background: var(--ad-primary-900);
  flex-shrink: 0;
}

.ad-sb-user {
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ad-sb-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ad-primary-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.ad-sb-uname { font-size: 0.74rem; font-weight: 600; color: #fff; }
.ad-sb-role  { font-size: 0.6rem; color: var(--ad-primary-300); }

/* ── Main area ── */
.ad-main {
  flex: 1;
  margin-left: var(--ad-sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Un ítem flex tiene `min-width: auto` implícito: se niega a encogerse por
     debajo del ancho mínimo de su contenido. Con el odontograma dentro,
     `.ad-main` se estiraba a ~1100px en un teléfono de 426px y arrastraba la
     página entera de lado — y de paso dejaba inútil el `overflow-x:auto` del
     odontograma y el de `.ad-table-wrap`, porque una caja con scroll no
     contiene nada si su padre crece con ella.

     Va aquí y no en la media query a propósito: no es un problema de móvil,
     es de cualquier ventana más estrecha que su contenido. */
  min-width: 0;
}

/* ── Topbar ── */
.ad-topbar {
  background: #fff;
  height: var(--ad-topbar-h);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--ad-border);
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}
.ad-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ad-topbar-left .page-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ad-primary-900);
  line-height: 1.2;
}
.ad-topbar-left .breadcrumb-text {
  font-size: 0.62rem;
  color: var(--ad-muted);
}
.ad-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Content area ── */
.ad-content {
  padding: 24px;
  flex: 1;
}

/* ── Buttons ── */
.ad-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: opacity 0.15s;
}
.ad-btn:hover { opacity: 0.88; text-decoration: none; }
.ad-btn-primary  { background: var(--ad-primary-600); color: #fff; }
.ad-btn-secondary { background: #fff; color: var(--ad-text-soft); border: 1px solid var(--ad-border); }
.ad-btn-danger   { background: var(--ad-danger-bg); color: #b91c1c; border: 1px solid #fecaca; }
.ad-btn-sm { padding: 4px 10px; font-size: 0.7rem; border-radius: 6px; }

/* ── Panels ── */
.ad-panel {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--ad-border);
  overflow: hidden;
  margin-bottom: 16px;
}
.ad-panel:last-child { margin-bottom: 0; }
.ad-panel-header {
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ad-panel-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ad-primary-900);
}
.ad-panel-action {
  font-size: 0.72rem;
  color: var(--ad-primary-600);
  text-decoration: none;
}
.ad-panel-action:hover { text-decoration: underline; }
.ad-panel-body { padding: 16px 18px; }

/* ── Stat cards ── */
.ad-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 1100px) { .ad-stats-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px)  { .ad-stats-grid { grid-template-columns: 1fr; } }

.ad-stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 18px;
  border: 1px solid var(--ad-border);
  position: relative;
  overflow: hidden;
}
.ad-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.ad-stat-card.blue::before   { background: var(--ad-primary-600); }
.ad-stat-card.green::before  { background: var(--ad-success); }
.ad-stat-card.amber::before  { background: var(--ad-warning); }
.ad-stat-card.red::before    { background: var(--ad-danger); }

.ad-stat-icon {
  width: 38px; height: 38px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  margin-bottom: 12px;
}
.ad-stat-card.blue  .ad-stat-icon { background: var(--ad-primary-50); }
.ad-stat-card.green .ad-stat-icon { background: #f0fdf4; }
.ad-stat-card.amber .ad-stat-icon { background: #fffbeb; }
.ad-stat-card.red   .ad-stat-icon { background: var(--ad-danger-bg); }

.ad-stat-value {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--ad-text);
  letter-spacing: -0.03em;
  line-height: 1;
}
.ad-stat-label {
  font-size: 0.72rem;
  color: var(--ad-muted);
  margin-top: 4px;
}
.ad-stat-delta { font-size: 0.68rem; margin-top: 8px; }
.ad-stat-delta.up   { color: var(--ad-success); }
.ad-stat-delta.down { color: var(--ad-danger); }

/* ── Tables ── */
.ad-table-wrap { overflow-x: auto; }
.ad-table {
  width: 100%;
  border-collapse: collapse;
}
.ad-table thead th {
  padding: 9px 16px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ad-muted);
  background: #f8faff;
  text-align: left;
  border-bottom: 1px solid var(--ad-border);
  white-space: nowrap;
}
.ad-table tbody td {
  padding: 11px 16px;
  font-size: 0.78rem;
  color: var(--ad-text-soft);
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.ad-table tbody tr:last-child td { border-bottom: none; }
.ad-table tbody tr:hover td { background: #f8faff; }

/* La cita de hoy cuya hora ya paso. Se apaga, no se esconde: hace falta ver
   a quien se atendio hoy. Con `opacity` sola el texto quedaba por debajo del
   contraste minimo, asi que el color se pone a mano. */
.ad-table tbody tr.ad-cita-pasada td { color: var(--ad-muted); }
.ad-table tbody tr.ad-cita-pasada .ad-avatar { background: #f1f5f9; color: var(--ad-muted); }
.ad-table tbody tr.ad-cita-pasada .ad-avatar-name { color: var(--ad-muted); font-weight: 500; }
.ad-cita-pasada-marca { font-size: 0.65rem; color: var(--ad-muted); margin-left: 6px; }

/* El estado de la cita y sus botones (dental/_estado_cita.html) */
.ad-estado-cita { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ad-estado-cita form { margin: 0; }
.ad-estado-cita-bloqueo { font-size: 0.78rem; color: var(--ad-muted); margin-top: 6px; }

/* Aviso de citas sin cerrar, encima de «Citas de hoy» del dashboard */
.ad-aviso-sin-cerrar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; font-size: 0.85rem; font-weight: 600;
  background: var(--ad-warning-bg); color: #b45309; text-decoration: none;
  border-bottom: 1px solid var(--ad-border);
}
.ad-aviso-sin-cerrar:hover { text-decoration: underline; color: #b45309; }

/* ── Avatar ── */
.ad-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ad-primary-100);
  color: var(--ad-primary-800);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 700;
  flex-shrink: 0;
}
.ad-avatar-cell { display: flex; align-items: center; gap: 9px; }
.ad-avatar-name { font-weight: 600; color: var(--ad-text); font-size: 0.78rem; }
.ad-avatar-sub  { font-size: 0.65rem; color: var(--ad-muted); }

/* ── Badges ── */
.ad-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.66rem;
  font-weight: 600;
  white-space: nowrap;
}
.ad-badge-blue   { background: var(--ad-primary-100); color: #1d4ed8; }
.ad-badge-green  { background: var(--ad-success-bg);  color: #15803d; }
.ad-badge-amber  { background: var(--ad-warning-bg);  color: #b45309; }
.ad-badge-gray   { background: #f1f5f9; color: #475569; }
.ad-badge-red    { background: var(--ad-danger-bg);   color: #b91c1c; }

/* ── Count badge (panel header) ── */
.ad-count-badge {
  background: var(--ad-primary-50);
  color: #1d4ed8;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 10px;
}

/* ── Search / filter bar ── */
.ad-search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.ad-search-wrap {
  flex: 1;
  min-width: 200px;
  position: relative;
}
.ad-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ad-muted);
  font-size: 14px;
  pointer-events: none;
}
.ad-search-input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border: 1px solid var(--ad-border);
  border-radius: 8px;
  font-size: 0.78rem;
  color: var(--ad-text);
  background: #fff;
  outline: none;
  font-family: inherit;
}
.ad-search-input:focus {
  border-color: var(--ad-primary-400);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}

/* ── Forms ── */
.ad-form-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) { .ad-form-layout { grid-template-columns: 1fr; } }

.ad-form-section {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--ad-border);
  overflow: hidden;
  margin-bottom: 16px;
}
.ad-form-section:last-child { margin-bottom: 0; }

.ad-form-section-header {
  padding: 14px 20px;
  border-bottom: 1px solid #f1f5f9;
}
.ad-form-section-title    { font-size: 0.88rem; font-weight: 700; color: var(--ad-primary-900); }
.ad-form-section-subtitle { font-size: 0.66rem; color: var(--ad-muted); margin-top: 2px; }

.ad-form-body { padding: 18px 20px; }

.ad-form-row {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}
.ad-form-row.cols-2 { grid-template-columns: 1fr 1fr; }
.ad-form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.ad-form-row.cols-1 { grid-template-columns: 1fr; }
@media (max-width: 700px) {
  .ad-form-row.cols-2,
  .ad-form-row.cols-3 { grid-template-columns: 1fr; }
}

.ad-form-group { display: flex; flex-direction: column; gap: 5px; }
.ad-label { font-size: 0.72rem; font-weight: 600; color: var(--ad-text); }
.ad-label .req { color: var(--ad-danger); margin-left: 2px; }
.ad-hint { font-size: 0.64rem; color: var(--ad-muted); }

/* Campo congelado: lo escrito en una cita de un día anterior sale en el
   expediente y no se reescribe (Art. 42.g). Tiene que LEERSE como bloqueado
   sin llegar a leerse como roto, y sobre todo tiene que seguir siendo legible
   y seleccionable: lo que hay en la caja es justo lo que quien atiende va a
   querer copiar a una nota de evolución. Por eso es `readonly` con fondo gris
   y no `disabled`, que además del gris del navegador impide seleccionar.
   `cursor: default` porque el cursor de texto sobre algo que no acepta texto
   promete lo que no hay. */
.ad-campo-congelado,
.ad-campo-congelado:focus {
  background: #f8fafc;
  color: var(--ad-muted);
  border-style: dashed;
  cursor: default;
  box-shadow: none;
}
/* El aviso que lo acompaña va en el color de advertencia y no en el de error:
   no ha fallado nada, es la regla funcionando. */
.ad-hint-congelado { color: #92400e; }
.ad-hint-congelado a { color: inherit; }

/* Los errores de campo. Al pintar los formularios campo a campo hay que
   sacarlos a mano con {{ campo.errors }}, y Django los suelta en un
   <ul class="errorlist"> que sin esto sale como una lista con viñetas
   negras, del mismo color que el texto normal: se lee como un párrafo más. */
.ad-content .errorlist {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.66rem;
  color: var(--ad-danger);
}

/* Bloque plegado de campos que no hacen falta para dar una hora. <details>
   pinta su propio triángulo y no necesita una línea de JavaScript. */
.ad-form-opcional { margin-top: 4px; }
.ad-form-opcional > summary {
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ad-muted);
  padding: 8px 0;
  user-select: none;
}
.ad-form-opcional > summary:hover { color: var(--ad-text); }
.ad-form-opcional[open] > summary { margin-bottom: 10px; }

/* Los huecos libres de la tarjeta de disponibilidad son botones: hay que
   quitarles el aspecto de botón del navegador y dejarles el de la etiqueta. */
.ad-slot-libre {
  border: 0;
  font: inherit;
  font-size: 0.62rem;
  cursor: pointer;
  padding: 3px 7px;
}
.ad-slot-libre:hover { filter: brightness(0.92); }
.ad-slot-libre:focus-visible {
  outline: 2px solid var(--ad-primary-400);
  outline-offset: 1px;
}

/* Sugerencias de motivo: los servicios del catálogo, para no escribir a mano
   lo de siempre. Son botones porque rellenan la caja al pulsarlos; se les
   quita el aspecto de botón del navegador y se les deja el de etiqueta. */
.ad-sugerencias {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.ad-sugerencia {
  border: 1px solid var(--ad-border);
  background: #f8fafc;
  color: var(--ad-text);
  border-radius: 999px;
  font: inherit;
  font-size: 0.72rem;
  line-height: 1.2;
  padding: 5px 11px;
  cursor: pointer;
}
.ad-sugerencia:hover {
  border-color: var(--ad-primary-400);
  color: var(--ad-primary);
}
.ad-sugerencia:focus-visible {
  outline: 2px solid var(--ad-primary-400);
  outline-offset: 1px;
}
/* Explicito: el JS oculta con `hidden`, y cualquier `display` que se le
   ponga manana a `.ad-sugerencia` lo pisaria sin avisar. */
.ad-sugerencia[hidden],
.ad-sugerencias-mas[hidden] { display: none; }
.ad-sugerencias-mas {
  align-self: center;
  font-size: 0.72rem;
  color: var(--ad-muted);
}

/* Override Bootstrap form controls */
.ad-content .form-control,
.ad-content .form-select,
.ad-content input[type="text"],
.ad-content input[type="email"],
.ad-content input[type="date"],
.ad-content input[type="time"],
.ad-content input[type="number"],
.ad-content input[type="password"],
.ad-content select,
.ad-content textarea {
  border: 1px solid var(--ad-border);
  border-radius: 7px;
  font-size: 0.78rem;
  padding: 8px 10px;
  color: var(--ad-text);
  background: #fff;
  font-family: inherit;
  width: 100%;
}
.ad-content .form-control:focus,
.ad-content input:focus,
.ad-content select:focus,
.ad-content textarea:focus {
  border-color: var(--ad-primary-400);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
  outline: none;
}

.ad-form-footer {
  padding: 14px 20px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Info side panel (formularios) ── */
.ad-info-stack { display: flex; flex-direction: column; gap: 14px; }
.ad-info-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--ad-border);
  overflow: hidden;
}
.ad-info-card-header {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ad-primary-900);
}
.ad-info-card-body {
  padding: 12px 16px;
  font-size: 0.74rem;
  color: var(--ad-muted);
  line-height: 1.55;
}
.ad-info-link {
  display: block;
  padding: 8px 10px;
  background: var(--ad-primary-50);
  border: 1px solid var(--ad-primary-100);
  border-radius: 7px;
  font-size: 0.72rem;
  color: var(--ad-primary-800);
  text-decoration: none;
  text-align: center;
  font-weight: 600;
  margin-bottom: 6px;
}
.ad-info-link:last-child { margin-bottom: 0; }
.ad-info-link:hover { background: var(--ad-primary-100); text-decoration: none; }

/* ── Delete confirmation ── */
.ad-delete-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--ad-border);
  padding: 32px 36px;
  max-width: 480px;
  margin: 40px auto;
  text-align: center;
}
.ad-delete-card h4 { font-size: 1rem; color: var(--ad-text); margin-bottom: 8px; }
.ad-delete-icon { font-size: 2.8rem; margin-bottom: 16px; display: block; }

/* ── Dashboard two-col layout ── */
.ad-two-col {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 1000px) { .ad-two-col { grid-template-columns: 1fr; } }

/* ── Mini bar chart ── */
.ad-mini-chart {
  padding: 16px 18px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 80px;
}
.ad-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}
.ad-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--ad-primary-100);
  min-height: 4px;
}
.ad-bar.today { background: var(--ad-primary-600); }
.ad-bar-day { font-size: 0.58rem; color: var(--ad-muted); }

/* ── Alert list (low stock) ── */
.ad-alert-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.76rem;
}
.ad-alert-item:last-child { border-bottom: none; }
.ad-alert-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ad-alert-dot.red   { background: var(--ad-danger); }
.ad-alert-dot.amber { background: var(--ad-warning); }
.ad-alert-name { flex: 1; color: var(--ad-text-soft); }
.ad-alert-qty  { font-size: 0.68rem; color: var(--ad-muted); }
.ad-alert-qty strong { color: var(--ad-danger); }

/* ── Tomorrow appointments ── */
.ad-tomorrow-row { display: flex; flex-wrap: wrap; }
.ad-tomorrow-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  flex: 1;
  min-width: 160px;
  border-right: 1px solid #f1f5f9;
}
.ad-tomorrow-item:last-child { border-right: none; }
.ad-tomorrow-name { font-size: 0.76rem; font-weight: 500; color: var(--ad-text-soft); flex: 1; }
.ad-tomorrow-time { font-size: 0.68rem; color: var(--ad-muted); }

/* ── Login page ── */
.ad-login-page {
  min-height: 100vh;
  background: var(--ad-bg-page);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ad-login-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--ad-border);
  padding: 40px 36px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
}
.ad-login-logo { text-align: center; margin-bottom: 28px; }
.ad-login-logo .brand-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ad-primary-900);
  letter-spacing: -0.02em;
  display: block;
}
.ad-login-logo .brand-sub { font-size: 0.78rem; color: var(--ad-muted); }
.ad-login-card h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ad-text);
  margin-bottom: 20px;
  text-align: center;
}
.ad-login-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 0.72rem;
  color: var(--ad-muted);
}

/* ── Messages ── */
.ad-messages { margin-bottom: 16px; }
.ad-messages .alert {
  border-radius: 10px;
  font-size: 0.82rem;
  border: none;
  padding: 12px 16px;
}

/* ── Sidebar responsive — móvil ── */

/* Botón hamburguesa — oculto por defecto en desktop */
.ad-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--ad-border);
  border-radius: 6px;
  color: var(--ad-primary-900);
  font-size: 1.2rem;
  cursor: pointer;
  flex-shrink: 0;
}
.ad-hamburger:hover {
  background: rgba(30, 58, 138, 0.08);
}
.ad-hamburger:focus {
  outline: 2px solid var(--ad-primary-600);
  outline-offset: 2px;
}

/* Contenedor offcanvas — toma el ancho y color de la sidebar */
.ad-offcanvas-sidebar {
  width: var(--ad-sidebar-w) !important;
  background: var(--ad-primary-900);
  border-right: none;
}

/* El <aside class="ad-sidebar"> dentro del offcanvas no debe tener position:fixed ni display:none */
.ad-offcanvas-sidebar .ad-sidebar {
  display: flex;   /* contrarrestar display:none del @media */
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  flex: 1;
}

/* En móvil (< 768px) */
@media (max-width: 767px) {
  .ad-sidebar  { display: none; }          /* Ocultar sidebar fija */
  .ad-main     { margin-left: 0; }         /* Contenido usa 100% del ancho */
  .ad-hamburger { display: flex; }         /* Mostrar botón hamburguesa */
}

/* ── KPI cards (dashboard redesign) ── */
.ad-kpi-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 1200px) { .ad-kpi-grid-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .ad-kpi-grid-6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .ad-kpi-grid-6 { grid-template-columns: 1fr; } }

.ad-kpi-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--ad-border);
  border-left: 4px solid var(--ad-border);
  position: relative;
  overflow: hidden;
}
.ad-kpi-card.blue   { border-left-color: var(--ad-primary-600); }
.ad-kpi-card.green  { border-left-color: var(--ad-success); }
.ad-kpi-card.amber  { border-left-color: var(--ad-warning); }
.ad-kpi-card.red    { border-left-color: var(--ad-danger); }
.ad-kpi-card.indigo { border-left-color: #6366f1; }
.ad-kpi-card.teal   { border-left-color: #14b8a6; }

.ad-kpi-icon {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 1.4rem;
  opacity: 0.18;
  pointer-events: none;
}
.ad-kpi-label {
  font-size: 0.62rem;
  color: var(--ad-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.ad-kpi-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ad-text);
  letter-spacing: -0.03em;
  line-height: 1;
}
.ad-kpi-value.kpi-danger { color: var(--ad-danger); }
.ad-kpi-sub   { font-size: 0.63rem; color: var(--ad-muted); margin-top: 5px; }
.ad-kpi-delta { font-size: 0.63rem; margin-top: 5px; }
.ad-kpi-delta.up   { color: var(--ad-success); }
.ad-kpi-delta.down { color: var(--ad-danger); }

/* ── Alert two-col zone ── */
.ad-alert-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.ad-alert-two-col.ad-alert-one-col {
  grid-template-columns: 1fr;
  max-width: 560px;
}
@media (max-width: 900px) { .ad-alert-two-col { grid-template-columns: 1fr; } }

/* ── Chart 4 semanas ── */
.ad-mini-chart { height: 100px; }

.ad-bar-sep {
  width: 1px;
  background: var(--ad-border);
  align-self: stretch;
  margin: 0 3px;
  flex-shrink: 0;
}
.ad-bar-day-today { color: var(--ad-primary-600); font-weight: 700; }

/* ── Chips de filtros activos ── */
.ad-active-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.ad-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ad-primary-50);
  border: 1px solid var(--ad-primary-100);
  color: var(--ad-primary-800);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.68rem;
  font-weight: 600;
}
.ad-filter-tag-x {
  color: var(--ad-muted);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  text-decoration: none;
}
.ad-filter-tag-x:hover { color: var(--ad-danger); }

/* ── Barra de progreso (historia médica) ── */
.ad-prog-wrap { display: flex; flex-direction: column; gap: 5px; min-width: 180px; }
.ad-prog-header { display: flex; align-items: center; justify-content: space-between; }
.ad-prog-label { font-size: 0.7rem; font-weight: 700; }
.ad-prog-label.green { color: #15803d; }
.ad-prog-label.amber { color: #b45309; }
.ad-prog-label.red   { color: #b91c1c; }

.ad-prog-bar-bg {
  height: 6px;
  background: #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}
.ad-prog-bar-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.3s ease;
}
.ad-prog-bar-fill.green { background: var(--ad-success); }
.ad-prog-bar-fill.amber { background: var(--ad-warning); }
.ad-prog-bar-fill.red   { background: var(--ad-danger); }

.ad-prog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.ad-prog-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 0.6rem;
  font-weight: 600;
  white-space: nowrap;
}
.ad-prog-chip-ok   { background: var(--ad-success-bg); color: #15803d; }
.ad-prog-chip-miss { background: #f1f5f9; color: #94a3b8; }

/* Boton "abonar el saldo completo" junto al importe, en la ficha del paciente
   y en el reporte de saldos. Antes el color de hover se cambiaba con
   onmouseover/onmouseout inline, que la CSP estricta bloquea; esto es lo
   mismo sin JavaScript. */
.ad-btn-rellenar {
  white-space: nowrap;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.ad-btn-rellenar:hover { background: #e2e8f0; }

/* ══════════════════════════════════════════════════════════════════════
   ADAPTACIÓN A MÓVIL Y TABLET
   ──────────────────────────────────────────────────────────────────────
   Todo lo de aquí abajo va dentro de `@media (max-width: 767px)`, el mismo
   corte donde la sidebar se convierte en offcanvas. El escritorio no cambia
   de aspecto en ningún punto: si una regla táctil se sale de la media query,
   engorda todos los listados en pantalla grande.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── Campos a 16px ──
     Por debajo de 16px, Safari de iOS hace zoom solo al enfocar un campo y
     NO lo deshace al salir: se acaba arrastrando la página de lado tras cada
     campo. Son tres familias distintas: los del formulario normal, el input
     que Tom Select se monta por dentro, y el del login, que NO cuelga de
     `.ad-content` y por eso va listado aparte. */
  .ad-content .form-control,
  .ad-content .form-select,
  .ad-content input[type="text"],
  .ad-content input[type="email"],
  .ad-content input[type="date"],
  .ad-content input[type="time"],
  .ad-content input[type="number"],
  .ad-content input[type="password"],
  .ad-content input[type="tel"],
  .ad-content input[type="search"],
  .ad-content select,
  .ad-content textarea,
  .ts-control,
  .ts-control input,
  .ad-input {
    font-size: 16px;
  }

  /* `.ad-input` (login y bloqueo) no tiene más estilo que este; hereda la
     tipografía del navegador, que en la mayoría trae ~13px. */
  .ad-input {
    padding: 10px 12px;
  }

  /* ── Blancos táctiles ──
     `.ad-btn-sm` mide ~22px de alto y los listados están llenos de ellos con
     solo un icono dentro; la hamburguesa mide 36px y es el control más
     pulsado de todos. 44px es el mínimo para acertar con el dedo. */
  .ad-btn,
  .ad-btn-sm,
  .ad-btn-rellenar,
  .ad-hamburger {
    min-height: 44px;
  }
  .ad-btn, .ad-btn-sm { padding: 10px 16px; }
  .ad-hamburger { min-width: 44px; }

  /* Quita el retardo de 300ms que el navegador espera por si el toque era el
     primero de un doble-tap de zoom. `manipulation` conserva el desplazamiento
     y el pellizco; `none` los mataría. */
  .ad-btn,
  .ad-btn-sm,
  .ad-btn-rellenar,
  .ad-hamburger,
  .ad-sidebar a,
  .ad-table a {
    touch-action: manipulation;
  }

  /* ── Aprovechar el ancho ──
     24px de padding a cada lado son 48px de los 360px de un teléfono
     estrecho. El breadcrumb se va: la misma información está en el título. */
  .ad-content { padding: 14px; }
  .ad-topbar  { padding: 0 12px; }
  .ad-topbar-left .breadcrumb-text { display: none; }
  .ad-topbar-left .page-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ad-topbar-left { min-width: 0; }   /* sin esto el flex no deja truncar */
}

/* ── Odontograma ──
   16 dientes en fila son ~800px contra los 360px de un teléfono estrecho.

   El patrón: envoltorio con `overflow-x:auto` y pista hija con
   `width:max-content; margin-inline:auto`. El margen automático centra el
   odontograma cuando cabe y se rinde a 0 cuando no cabe. Con
   `justify-content:center` —que es lo que hacía la versión de solo lectura—
   el centrado de flexbox recorta el arranque cuando el contenido desborda, y
   los dientes de la izquierda quedan inalcanzables: no hay forma de
   desplazarse hasta ellos. Una sola pista para las dos arcadas, o se
   desplazan por separado y dejan de corresponderse. */
.ad-odonto-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;   /* que el rebote no arrastre la página */
}
.ad-odonto-pista {
  width: max-content;
  margin-inline: auto;
}

/* El aviso de deslizar. `hidden` por defecto; el JS lo destapa solo si el
   contenido desborda de verdad. La regla explícita hace falta porque una
   declaración `display` de clase ganaría al `display:none` del navegador. */
.ad-odonto-aviso {
  font-size: 11px;
  color: var(--ad-muted);
  text-align: center;
  margin-bottom: 4px;
}
.ad-odonto-aviso[hidden] { display: none; }

@media (max-width: 767px) {
  /* Dientes a 64px: a los 46px de escritorio cada cuadrante ronda los 20px,
     muy por debajo de lo que hace falta para acertar con el dedo. A 64px
     ronda los 30px — no llega a 44, pero las caras vecinas también son
     blancos válidos y el diente no se deforma. Una regla de clase gana al
     atributo `width` del marcado, así que no hay que ramificar el JS. */
  .ad-diente {
    width: 64px;
    height: 64px;
  }
  /* La de solo lectura no se marca, solo se lee: le basta con ser legible. */
  .ad-diente-ro {
    width: 52px;
    height: 52px;
  }
  /* NUNCA `touch-action: none` aquí: mataría el scroll horizontal que es
     justo lo que hace usable el odontograma en un teléfono. */
  .ad-diente path,
  .ad-diente circle {
    touch-action: manipulation;
  }

  /* La barra de herramientas se queda pegada bajo la topbar: al desplazarse
     por el odontograma se perdía de vista qué herramienta estaba activa. */
  .ad-odonto-herramientas {
    position: sticky;
    top: var(--ad-topbar-h);
    z-index: 50;
  }
  .herramienta-btn { min-height: 44px; }
}

/* ── Rejillas que traían el ancho escrito en un `style` inline ──
   Un `style` inline no admite media queries Y ADEMÁS gana a cualquier regla
   de hoja de estilos: mientras el ancho estuviera ahí, no había forma de
   colapsar la rejilla en un teléfono. Las declaraciones de aquí abajo son
   EXACTAMENTE las que estaban inline, para que el escritorio no cambie; lo
   nuevo es solo la media query que viene después. */
.ad-item-fila {
  display: grid;
  grid-template-columns: 2fr 80px 80px 80px;
  gap: 10px;
  margin-bottom: 10px;
}
.ad-item-precios {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.ad-dispcita-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ad-slots {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  min-height: 120px;
}
.ad-datos-dte {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 6px 16px;
  font-size: 0.875rem;
}
/* La de invalidar un evento de retorno lleva etiquetas más largas. */
.ad-datos-dte-ancha { grid-template-columns: 180px 1fr; }

/* Las tres cifras del pie del Evento de Retorno: original, devuelto y resto.
   En móvil se apilan; en una fila de 360px, tres importes en línea salen a
   ~110px cada uno y se parten por la mitad. */
.ad-retorno-cifras {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: end;
  gap: 6px 32px;
  padding: 14px 12px;
  margin-bottom: 16px;
  border-top: 2px solid #e2e8f0;
  text-align: right;
}
.ad-retorno-etiqueta { font-size: 0.75rem; color: var(--ad-muted); }
.ad-retorno-cifra {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

/* Cada hueco de la rejilla de horarios. El libre es un <a>, que por defecto
   es inline y rompería la celda: el `display` estaba escrito inline en el JS
   y así ganaba al `display:flex` con que el móvil centra el contenido dentro
   de los 44px. Desde aquí, la media query puede con él. */
.ad-hueco { display: block; }

@media (max-width: 767px) {
  /* La descripción del ítem ocupa la fila entera y tipo/cantidad/unidad se
     reparten debajo: a cuatro columnas, "Descripción" cabría en 90px. */
  .ad-item-fila { grid-template-columns: 1fr 1fr; }
  .ad-item-fila > :first-child { grid-column: 1 / -1; }
  /* Precio y descuento en línea, y el subtotal a lo ancho, que es el número
     que se mira. */
  .ad-item-precios { grid-template-columns: 1fr 1fr; }
  .ad-item-precios > :last-child { grid-column: 1 / -1; }

  /* Horarios y citas dejan de compartir el ancho: cada panel a pantalla
     completa. Con las dos columnas, los huecos de `repeat(4,1fr)` quedaban a
     ~40px, imposibles de acertar con el dedo. */
  .ad-dispcita-cols { grid-template-columns: 1fr; }
  .ad-slots { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
  .ad-hueco {
    min-height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* `160px 1fr` deja 200px para el valor en un teléfono de 360px, y ahí un
     número de control se parte en tres líneas. */
  .ad-datos-dte,
  .ad-datos-dte-ancha { grid-template-columns: 1fr; }

  /* Las tres cifras del retorno se apilan: en línea salen a ~110px cada una
     y los importes se parten por la mitad. */
  .ad-retorno-cifras { grid-template-columns: 1fr; gap: 10px; }
}

/* El formulario de nota de evolución (`_form_nota_evolucion.html`).

   Estas tres reglas vivían dentro de `dashboard_paciente.html`. Cuando el
   formulario se sacó a un parcial para que el detalle de la cita lo reusara,
   el marcado se fue y el estilo se quedó: el `<summary>` salía con el
   triángulo crudo del navegador y los campos sin rejilla. Un parcial que se
   usa en dos pantallas no puede depender del `<style>` de una de ellas. */
.ad-anadir {
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ad-primary);
  list-style: none;
}
.ad-anadir::-webkit-details-marker { display: none; }
.ad-nota-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

/* El folio de una nota de evolución: el identificador al que apuntan las
   correcciones. Estaba en gris pequeño al final de la fila, detrás de la
   firma y de los avisos — lo menos visible de lo más referenciado—, así que
   leer «corrige la nota 3» y encontrar la 3 era una búsqueda a ojo. */
.ad-folio {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--ad-muted);
  border: 1px solid var(--ad-border);
  border-radius: 5px;
  padding: 1px 6px;
  /* Compensa el encabezado fijo al saltar con `#folio-N`: sin esto la fila
     de destino queda debajo de la barra superior. */
  scroll-margin-top: 90px;
}
/* Al llegar por un enlace `#folio-N`, la fila de destino se señala sola: si
   no, el salto deja al lector delante de una lista igual a la de antes sin
   saber en cuál de las filas ha caído. */
.ad-folio:target {
  background: var(--ad-warning-bg);
  border-color: var(--ad-warning);
  color: #92400e;
}

/* La casilla de `_campos_formulario.html` va delante de su texto y en la
   misma línea, como en cualquier formulario; en columna quedaba suelta
   debajo de su rótulo. */
.ad-label-casilla {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* Los botones de una fila de tabla (PDF, JSON, Correo, Invalidar…). En una
   línea fija hacían la tabla más ancha que una pantalla de 1366 px y la
   columna quedaba fuera de la vista; así pasan a la línea de abajo cuando
   no caben. Ancho FIJO y no máximo: con un máximo, la tabla automática
   encoge la columna hasta el botón más ancho y los apila de uno en uno. */
.ad-acciones-fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  width: 200px;
  margin: 0 auto;
}
.ad-acciones-fila > form { margin: 0; }