/* =========================================================================
   CLÍNICA MÉDICA JARDINES — VARIANTE MINIMALISTA
   -------------------------------------------------------------------------
   Se carga DESPUÉS de precios.css y solo sobrescribe lo necesario.
   Mismos colores, misma tipografía, mismo comportamiento.

   Qué cambia: desaparecen las cajas. No hay fichas con sombra ni fondos de
   color separando bloques. La jerarquía la llevan el espacio en blanco, los
   filetes de un píxel y el peso tipográfico.

   Para volver a la versión original, basta con no cargar este archivo.
   ========================================================================= */

/* ---------- sin esquinas redondeadas ni cajas ---------------------------- */
.cmj-precios { --cmj-radio: 0px; --cmj-radio-sm: 0px; }

/* Al desaparecer la barra lateral la lista se estiraría a todo el ancho y el
   precio quedaría demasiado lejos del nombre. Se acota la medida. */
.cmj-precios .cmj-wrap { max-width: 900px; }

/* Tercer escalón de filete, entre la regla del área y las de las filas.
   Luminancias: área 0.023 · categoría 0.531 · filas 0.796                */
.cmj-precios { --cmj-line-cat: #C8C0AF; }
/* Igual que en precios.css: no sigue el modo oscuro del visitante. */
.cmj-precios[data-cmj-theme="dark"] { --cmj-line-cat: #7A6858; }

.cmj-panel {
  background: transparent;
  border: 0; border-radius: 0; box-shadow: none;
  overflow: visible;
}

/* ---------- cabecera: más aire, menos adorno ----------------------------- */
.cmj-precios {
  --cmj-aire-arriba: clamp(48px, 8vw, 96px);
  padding-block: var(--cmj-aire-arriba) clamp(48px, 8vw, 96px);
}
.cmj-titulo { font-size: clamp(2.1rem, 5.2vw, 3.1rem); letter-spacing: -.03em; }
.cmj-eyebrow { color: var(--cmj-ink-3); }
.cmj-eyebrow::before { width: 16px; }
.cmj-datos-head { margin-top: 26px; }
.cmj-datos-head li::before { display: none; }
.cmj-datos-head li { gap: 5px; }
.cmj-datos-head li + li { padding-left: 17px; border-left: 1px solid var(--cmj-line); }

/* ---------- avisos: filete lateral en vez de bloque de color ------------- */
.cmj-revision {
  background: transparent; border: 0;
  border-left: 2px solid var(--cmj-accent);
  border-radius: 0; padding: 4px 0 4px 16px;
}
.cmj-revision code { background: transparent; padding: 0; }
.cmj-revision.cmj-demo {
  background: transparent; border: 0;
  border-left: 2px solid var(--cmj-sel-line);
}
.cmj-revision.cmj-demo code { background: transparent; }

/* ---------- buscador y orden: mismas cajas que las píldoras de área ------ */
.cmj-toolbar { padding-top: 22px; }
.cmj-toolbar::after { background: var(--cmj-line); }

.cmj-buscador input,
.cmj-orden {
  background-color: var(--cmj-surface);
  border: 1px solid var(--cmj-line);
  border-radius: 999px;
  height: 50px;
}
/* Con los extremos redondeados el texto necesita más margen interior para
   no pegarse a la curva. */
.cmj-buscador input { padding: 0 50px 0 46px; font-size: .975rem; }
.cmj-buscador svg { left: 20px; }
.cmj-orden { padding-left: 20px; padding-right: 42px; background-position: right 18px center; }

/* El foco engorda el filete por dentro, para que la caja no se mueva */
.cmj-buscador input:focus-visible,
.cmj-orden:focus-visible {
  outline: 0;
  border-color: var(--cmj-primary);
  box-shadow: inset 0 0 0 1px var(--cmj-primary);
}
.cmj-limpiar { background: transparent; right: 10px; }
.cmj-limpiar:hover { background: var(--cmj-surface-2); }

/* ---------- áreas: píldoras que fluyen en filas -------------------------
   Se abandona la barra lateral: las 11 áreas pasan a una nube de píldoras
   sobre el contenido, y la lista de precios gana todo el ancho.           */
.cmj-layout { display: block; }

.cmj-nav {
  position: static;
  flex-direction: row; flex-wrap: wrap;
  gap: 8px;
  max-height: none; overflow: visible;
  margin: 24px 0 34px; padding: 0;
}
.cmj-nav-btn {
  width: auto; flex: 0 0 auto;
  padding: 11px 20px;
  background: var(--cmj-surface);
  color: var(--cmj-ink-2);
  border: 1px solid var(--cmj-line);
  border-radius: 999px;
  box-shadow: none;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.cmj-nav-btn:hover {
  background: var(--cmj-surface-2); color: var(--cmj-ink);
  border-color: var(--cmj-surface-2);
}
.cmj-nav-btn[aria-pressed="true"] {
  background: #2F2E2C; border-color: #2F2E2C; color: #F7F2E9;
  box-shadow: none;
}
.cmj-nav-ico { display: none; }

/* nombre y apostilla en la misma línea, para que la píldora no crezca */
.cmj-nav-txt { display: flex; align-items: baseline; gap: 7px; }
.cmj-nav-nombre { font-size: .875rem; font-weight: 400; }
.cmj-nav-btn[aria-pressed="true"] .cmj-nav-nombre { font-weight: 700; }
.cmj-nav-prox {
  display: inline; margin: 0;
  font-size: .6rem; letter-spacing: .1em;
}
.cmj-nav-btn[aria-pressed="true"] .cmj-nav-prox { color: inherit; opacity: .7; }
.cmj-nav-n { font-size: .72rem; opacity: .55; }
.cmj-nav-btn[aria-pressed="true"] .cmj-nav-n { color: inherit; opacity: .6; }

/* ---------- área: título grande, filete fino ---------------------------- */
.cmj-panel-cab {
  padding: 0 0 20px;
  border-bottom: 1px solid var(--cmj-ink);
  gap: 0;
}
.cmj-panel-cab .cmj-icono { display: none; }
.cmj-panel-nombre { font-size: 1.7rem; letter-spacing: -.022em; }
.cmj-panel-desc { margin-top: 6px; font-size: .9rem; }

/* ---------- Facial / Corporal: rótulo suelto, sin banda ----------------- */
.cmj-sub {
  background: transparent; border: 0;
  padding: 34px 0 6px;
  color: var(--cmj-ink-3); letter-spacing: .18em; font-size: .66rem;
}

/* ---------- categoría: sin relleno de color ----------------------------- */
/* Cada categoría queda enmarcada por dos filetes del mismo peso: el que
   la abre bajo su nombre y el que la cierra al empezar la siguiente.   */
.cmj-cat-cab {
  background: transparent;
  border-top: 1px solid var(--cmj-line-cat);
  border-bottom: 1px solid var(--cmj-line-cat);
  /* Mucho aire por arriba: es lo que separa una categoría de la anterior.
     Por abajo basta con poco, porque sus propias filas vienen justo detrás. */
  padding: 58px 0 14px;
}
/* El blindaje de precios.css devuelve un solo filete (el de arriba), que es
   lo que necesita la versión con fichas. Aquí la cabecera lleva dos, así que
   se repiten los dos para el estado enfocado. */
.cmj-cat-cab:focus,
.cmj-cat-cab:active {
  border-top: 1px solid var(--cmj-line-cat);
  border-bottom: 1px solid var(--cmj-line-cat);
}
.cmj-cat:first-of-type > .cmj-cat-cab:focus,
.cmj-cat:first-of-type > .cmj-cat-cab:active,
.cmj-sub + .cmj-cat > .cmj-cat-cab:focus,
.cmj-sub + .cmj-cat > .cmj-cat-cab:active { border-top: 0; }
.cmj-cat-cab:hover { background: transparent; }
.cmj-cat-cab:hover .cmj-cat-nombre { color: var(--cmj-primary); }
.cmj-cat-cab:focus-visible { outline-offset: 2px; }
.cmj-cat:first-of-type > .cmj-cat-cab { border-top: 0; padding-top: 10px; }
/* Justo debajo del rótulo de grupo («FACIAL») el aire se recorta: ese
   rótulo ya hace de separación y, si no, quedaba un hueco enorme. */
.cmj-sub + .cmj-cat > .cmj-cat-cab { border-top: 0; padding-top: 14px; }
/* Inria Serif solo trae 300, 400 y 700: entre el 400 de antes y el 700 no
   hay nada intermedio que el navegador pueda cargar, así que «un poco más
   grueso» es 700. Para que no cante, baja una pizca de cuerpo. */
.cmj-cat-nombre { font-size: 1.08rem; font-weight: 700; }
.cmj-cat-sub { margin-top: 3px; }
.cmj-cat-n {
  background: transparent; padding: 0;
  font-size: .78rem; color: var(--cmj-ink-3);
}
.cmj-cat-cuerpo { background: transparent; }

/* ---------- filas: solo filetes ------------------------------------------ */
.cmj-lista { background: transparent; }
.cmj-item {
  background: transparent;
  padding: 13px 0;
  border-bottom: 1px solid var(--cmj-line-soft);
}
.cmj-item:hover { background: transparent; }
.cmj-item:hover .cmj-nombre { color: var(--cmj-primary); }
.cmj-item.is-abierto { background: transparent; }
.cmj-item.is-elegido {
  background: transparent;
  box-shadow: inset 2px 0 0 var(--cmj-sel-line);
  padding-left: 14px;
}
.cmj-item.es-pendiente { box-shadow: inset 2px 0 0 var(--cmj-accent); padding-left: 14px; }
.cmj-item.es-hijo { padding-left: 22px; }
.cmj-subserv { background: transparent; padding: 18px 0 4px; }

.cmj-nombre { font-size: .9rem; }
.cmj-cifra { font-size: 1rem; }
/* Píldora, como las áreas y el botón. El relleno es igual a izquierda y a
   derecha: antes el filete de la izquierda hacía que el texto pareciera
   descentrado dentro de su caja.                                        */
.cmj-tag {
  padding: 2px 8px;
  border-left: 0; border-radius: 999px;
  margin-left: 10px; font-weight: 400;
  font-size: .54rem; letter-spacing: .06em;
  line-height: 1.3;
}

/* ---------- detalle: sangría con filete ---------------------------------- */
.cmj-detalle {
  background: transparent;
  border: 0; border-left: 1px solid var(--cmj-line);
  border-radius: 0;
  margin: 4px 0 10px; padding: 2px 0 2px 18px;
}
.cmj-detalle-txt { font-size: .92rem; }

/* ---------- botón «+»: círculo siempre presente, pero tenue --------------
   El contorno se ve en todas las filas para que se entienda que la acción
   existe, pero muy atenuado. Al pasar el ratón por encima sube a opacidad
   completa. Marcado, foco y deshabilitado se controlan aparte para que el
   atenuado no se les aplique encima.                                      */
.cmj-add {
  background: transparent;
  border-color: var(--cmj-ink-3);
  opacity: .22;
  transition: opacity .16s ease, background .16s ease,
              border-color .16s ease, color .16s ease;
}
.cmj-add:hover {
  opacity: 1;
  background: transparent;
  border-color: var(--cmj-ink);
  color: var(--cmj-ink);
}
.cmj-add:focus-visible { opacity: 1; border-color: var(--cmj-primary); }

/* Ya añadido al presupuesto: es un estado, no una invitación. Se ve entero. */
.cmj-add[aria-pressed="true"] {
  opacity: 1;
  background: transparent;
  border-color: var(--cmj-sel-line);
  color: var(--cmj-sel-line);
}
.cmj-add[aria-pressed="true"]:hover { border-color: var(--cmj-sel-line); }

/* Sin precio: no se puede añadir, así que ni siquiera responde al ratón. */
.cmj-add[disabled] { opacity: .12; border-color: var(--cmj-ink-3); }
.cmj-add[disabled]:hover { opacity: .12; border-color: var(--cmj-ink-3); }


/* ---------- vacío --------------------------------------------------------- */
.cmj-vacio { background: transparent; border: 0; border-top: 1px solid var(--cmj-line); }

/* ---------- presupuesto: barra flotante redondeada ------------------------ */
.cmj-tray {
  border-radius: 24px;
  border: 1px solid var(--cmj-line);
  box-shadow: 0 1px 2px rgba(81, 50, 41, .05),
              0 18px 40px -22px rgba(81, 50, 41, .45);
  width: min(720px, calc(100% - 24px));
  margin-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
.cmj-tray-barra { padding: 13px 13px 13px 17px; }
.cmj-tray-n { border-radius: 999px; }
.cmj-tray-cta { border-radius: 999px; padding: 0 20px; }
.cmj-quitar { border-radius: 999px; background: transparent; }
.cmj-quitar:hover { background: var(--cmj-surface-2); }
.cmj-tray-detalle li { padding-inline: 17px; }
.cmj-tray-pie { padding: 10px 17px 14px; }

/* ---------- ventana ------------------------------------------------------- */
.cmj-modal { border-radius: 4px; }
.cmj-modal .cmj-precios {
  --cmj-aire-arriba: 30px;
  padding-block: var(--cmj-aire-arriba) 34px;
}
.cmj-modal .cmj-nav { top: 74px; }
/* El botón de cerrar NO se toca aquí: vive fuera de .cmj-precios, así que
   las variables --cmj-* no le llegan y border-color: var(--cmj-line) se
   quedaba sin valor, heredando el marrón del texto. Se queda con el
   círculo y el filete claro que ya trae precios.css.                    */

/* ---------- legal --------------------------------------------------------- */
.cmj-legal { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--cmj-line); }

@media (max-width: 620px) {
  .cmj-nav { gap: 7px; margin: 20px 0 26px; }
  .cmj-nav-btn { padding: 9px 15px; }
  .cmj-nav-nombre { font-size: .82rem; }
}
@media (max-width: 620px) {
  .cmj-item { padding: 12px 0; }
  .cmj-cat-cab { padding: 18px 0 12px; }
  .cmj-panel-cab { padding: 0 0 16px; }
}