/*
 * Ramily — capa de tema sobre Bootstrap 5.
 *
 * Se carga DESPUÉS de bootstrap.min.css. No reescribe Bootstrap: le cambia sus
 * variables (--bs-*) y añade unos pocos componentes propios. Ver diseño.md §9.
 *
 * Paleta corporativa (negocio.md §39). Uso equilibrado: salvia para la acción,
 * coral SOLO para "hoy" y avisos puntuales, crema de fondo, blanco para
 * tarjetas, verde grisáceo para líneas. Nunca los cinco a la vez.
 */

@font-face {
  font-family: 'Inter';
  src: url('inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Marca */
  --ramily-sage:  #5D9E85;
  --ramily-coral: #F79171;
  --ramily-sand:  #F7D7AE;
  --ramily-mist:  #BECFBE;
  --ramily-cream: #F9F3E8;

  /* Derivados */
  --ramily-sage-dark:  #4A8069;
  --ramily-sage-soft:  #E7F1EC;
  --ramily-coral-dark: #B4573A;
  --ramily-coral-soft: #FDEAE2;
  --ramily-ink:        #2E3A34;
  --ramily-ink-soft:   #6B7A72;
  --ramily-surface:    #FFFFFF;
  --ramily-line:       #E2E8E2;

  --ramily-radius:   .9rem;
  --ramily-radius-sm:.55rem;
  --ramily-shadow:   0 6px 24px -10px rgba(46, 58, 52, .22);
  --ramily-shadow-lg:0 14px 40px -14px rgba(46, 58, 52, .30);
  --ramily-ease:     .16s cubic-bezier(.4, 0, .2, 1);

  /* Remapeo de Bootstrap */
  --bs-primary: var(--ramily-sage);
  --bs-primary-rgb: 93, 158, 133;
  --bs-body-bg: var(--ramily-cream);
  --bs-body-color: var(--ramily-ink);
  --bs-secondary-color: var(--ramily-ink-soft);
  --bs-border-color: var(--ramily-line);
  --bs-border-radius: var(--ramily-radius-sm);
  --bs-border-radius-lg: var(--ramily-radius);
  /* Bootstrap 5.3 pinta los enlaces con *-rgb, no con --bs-link-color: si solo
     se define la variable de color, los enlaces se quedan azules. */
  --bs-link-color: var(--ramily-sage-dark);
  --bs-link-color-rgb: 74, 128, 105;          /* --ramily-sage-dark */
  --bs-link-hover-color: var(--ramily-sage);
  --bs-link-hover-color-rgb: 93, 158, 133;    /* --ramily-sage */
  --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-emphasis-color: var(--ramily-ink);
}

body {
  background-color: var(--ramily-cream);
  color: var(--ramily-ink);
  font-family: var(--bs-font-sans-serif);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Un velo muy suave para que el fondo crema no sea plano. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60rem 30rem at 12% -8%, rgba(93, 158, 133, .13), transparent 60%),
    radial-gradient(48rem 26rem at 96% 4%, rgba(247, 145, 113, .10), transparent 62%);
  pointer-events: none;
}

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.015em; color: var(--ramily-ink); }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem); }
.lead { color: var(--ramily-ink-soft); }
.text-muted { color: var(--ramily-ink-soft) !important; }

/* --- Barra superior --------------------------------------------------- */
.ramily-navbar {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--ramily-line);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.ramily-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 650;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  color: var(--ramily-ink);
  text-decoration: none;
}
.ramily-brand:hover { color: var(--ramily-sage-dark); }
.ramily-brand svg { display: block; }

.ramily-navbar .nav-link {
  color: var(--ramily-ink-soft);
  font-weight: 500;
  border-radius: 999px;
  padding: .35rem .85rem;
  transition: background var(--ramily-ease), color var(--ramily-ease);
}
.ramily-navbar .nav-link:hover { background: var(--ramily-sage-soft); color: var(--ramily-sage-dark); }
.ramily-navbar .nav-link.active { background: var(--ramily-sage-soft); color: var(--ramily-sage-dark); }

/* --- Superficies -------------------------------------------------------- */
.ramily-card {
  background: var(--ramily-surface);
  border: 1px solid var(--ramily-line);
  border-radius: var(--ramily-radius);
  box-shadow: var(--ramily-shadow);
}
a.ramily-card,
.ramily-card--hover {
  transition: transform var(--ramily-ease), box-shadow var(--ramily-ease), border-color var(--ramily-ease);
}
a.ramily-card:hover,
.ramily-card--hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--ramily-shadow-lg);
  border-color: var(--ramily-mist);
}

/* --- Botones ------------------------------------------------------------ */
.btn { font-weight: 550; border-radius: 999px; padding-inline: 1.15rem; transition: all var(--ramily-ease); }
.btn-lg { padding: .7rem 1.6rem; }

.btn-primary {
  --bs-btn-bg: var(--ramily-sage);
  --bs-btn-border-color: var(--ramily-sage);
  --bs-btn-hover-bg: var(--ramily-sage-dark);
  --bs-btn-hover-border-color: var(--ramily-sage-dark);
  --bs-btn-active-bg: var(--ramily-sage-dark);
  --bs-btn-active-border-color: var(--ramily-sage-dark);
  --bs-btn-disabled-bg: var(--ramily-mist);
  --bs-btn-disabled-border-color: var(--ramily-mist);
  --bs-btn-focus-shadow-rgb: 93, 158, 133;
}
.btn-primary:hover { box-shadow: 0 6px 18px -8px rgba(93, 158, 133, .8); }

/* Los estados «activo», «deshabilitado» y el halo del foco también traen el azul
   de Bootstrap cableado, no heredado: si no se redefinen aquí, un botón
   deshabilitado (las flechas de prioridad en los extremos de la lista) se pinta
   azul en medio de una pantalla verde. */
.btn-outline-primary {
  --bs-btn-color: var(--ramily-sage-dark);
  --bs-btn-border-color: var(--ramily-mist);
  --bs-btn-hover-bg: var(--ramily-sage-soft);
  --bs-btn-hover-border-color: var(--ramily-sage);
  --bs-btn-hover-color: var(--ramily-sage-dark);
  --bs-btn-active-bg: var(--ramily-sage);
  --bs-btn-active-border-color: var(--ramily-sage);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: var(--ramily-ink-soft);
  --bs-btn-disabled-border-color: var(--ramily-mist);
  --bs-btn-focus-shadow-rgb: 93, 158, 133;
}

.btn-accent {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ramily-coral);
  --bs-btn-border-color: var(--ramily-coral);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #E87F5E;
  --bs-btn-hover-border-color: #E87F5E;
}

/* --- Formularios -------------------------------------------------------- */
.form-control, .form-select {
  border-color: var(--ramily-line);
  border-radius: var(--ramily-radius-sm);
  padding: .6rem .85rem;
  /* Bootstrap pinta los campos con --bs-body-bg, que aquí es el crema del
     fondo: sobre una tarjeta blanca el campo parecía deshabilitado. */
  background-color: var(--ramily-surface);
}
.form-control:disabled, .form-select:disabled {
  background-color: #F1F3F1;
  color: var(--ramily-ink-soft);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ramily-sage);
  box-shadow: 0 0 0 .2rem rgba(93, 158, 133, .18);
}
.form-label { font-weight: 550; font-size: .875rem; color: var(--ramily-ink-soft); }

/* --- El azul de Bootstrap ------------------------------------------------
 * Bootstrap compila su azul (#0d6efd) como color LITERAL en varias reglas, no
 * como variable, así que redefinir --bs-primary no llega a ellas. Es la tercera
 * vez que aparece un componente azul por sorpresa (enlaces, campos y ahora
 * casillas), así que se barren todos de una vez.
 *
 * La lista sale de buscar #0d6efd en bootstrap.min.css. Si algún día se
 * actualiza Bootstrap, conviene repetir esa búsqueda.
 */
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--ramily-sage);
  border-color: var(--ramily-sage);
}
.form-check-input:focus {
  border-color: var(--ramily-sage);
  box-shadow: 0 0 0 .2rem rgba(93, 158, 133, .22);
}
/* Sin marcar también heredaban el crema del body, como pasaba con .form-control. */
.form-check-input {
  background-color: var(--ramily-surface);
  border-color: var(--ramily-mist);
  cursor: pointer;
}

/* Y las tablas igual: `.table { --bs-table-bg: var(--bs-body-bg) }`. Sobre una
   tarjeta blanca salían de color crema. Mismo tropiezo que con .form-control y
   .form-check-input: en Bootstrap, «fondo del cuerpo» y «fondo de superficie»
   son la misma variable, y en Ramily NO lo son. */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ramily-ink);
  --bs-table-border-color: var(--ramily-line);
}
.form-check-label { cursor: pointer; }

.form-range::-webkit-slider-thumb { background-color: var(--ramily-sage); }
.form-range::-moz-range-thumb { background-color: var(--ramily-sage); }

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--ramily-sage);
  --bs-dropdown-border-color: var(--ramily-line);
  --bs-dropdown-border-radius: var(--ramily-radius-sm);
  --bs-dropdown-bg: var(--ramily-surface);
}
.list-group { --bs-list-group-active-bg: var(--ramily-sage); --bs-list-group-active-border-color: var(--ramily-sage); }
.nav-pills  { --bs-nav-pills-link-active-bg: var(--ramily-sage); }
.pagination { --bs-pagination-active-bg: var(--ramily-sage); --bs-pagination-active-border-color: var(--ramily-sage); --bs-pagination-color: var(--ramily-sage-dark); }
.progress   { --bs-progress-bar-bg: var(--ramily-sage); }

/* --- Chips y avisos ----------------------------------------------------- */
.ramily-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 550;
  padding: .18rem .65rem;
  border-radius: 999px;
  background: var(--ramily-sage-soft);
  color: var(--ramily-sage-dark);
  border: 1px solid transparent;
}
.ramily-chip--mist   { background: #EEF3EE; color: var(--ramily-ink-soft); }
.ramily-chip--sand   { background: var(--ramily-sand); color: #7A5B33; }
.ramily-chip--coral  { background: var(--ramily-coral-soft); color: var(--ramily-coral-dark); }

.alert { border-radius: var(--ramily-radius-sm); border-width: 1px; }
.alert-info    { background: var(--ramily-sage-soft); border-color: var(--ramily-mist); color: var(--ramily-sage-dark); }
.alert-warning { background: var(--ramily-sand); border-color: #EEC79A; color: #7A5B33; }

/* --- Personas del calendario -------------------------------------------- */
/* El color nunca identifica solo: la muestra siempre va acompañada del nombre
   (negocio.md §9.5). Estas piezas son decoración, por eso van aria-hidden. */
.ramily-swatch {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: .5rem;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(46, 58, 52, .12);
}

.ramily-initials {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ramily-sage-soft);
  color: var(--ramily-sage-dark);
  font-size: .72rem;
  font-weight: 650;
}

/* Selector de color: radios reales (accesibles con teclado) con la muestra
   como etiqueta visible. */
.ramily-color { position: relative; display: inline-flex; cursor: pointer; }
.ramily-color input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.ramily-color > span:first-of-type {
  width: 2rem;
  height: 2rem;
  border-radius: .55rem;
  box-shadow: inset 0 0 0 1px rgba(46, 58, 52, .12);
  transition: transform var(--ramily-ease), box-shadow var(--ramily-ease);
}
.ramily-color:hover > span:first-of-type { transform: translateY(-1px); }
.ramily-color input:checked + span {
  box-shadow: 0 0 0 2px var(--ramily-surface), 0 0 0 4px var(--ramily-sage);
}
.ramily-color input:focus-visible + span {
  box-shadow: 0 0 0 2px var(--ramily-surface), 0 0 0 4px var(--ramily-ink);
}
/* Ya usado por otro custodio: se avisa, no se impide (§9.3, §9.5). */
.ramily-color.is-used > span:first-of-type::after {
  content: '';
  position: absolute;
  right: .18rem;
  bottom: .18rem;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--ramily-surface);
  box-shadow: inset 0 0 0 1px rgba(46, 58, 52, .35);
}

/* Selector del TRAZO de un tipo de día (§16.2): mismo patrón que el de color,
   justo arriba —radios reales, la muestra como etiqueta visible—, pero
   enseñando el borde en sí (seguido, rayas, puntos) en vez de un color, para
   que se elija de un vistazo y no por el nombre. */
.ramily-border-style { position: relative; display: inline-flex; cursor: pointer; }
.ramily-border-style input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.ramily-border-style-preview {
  display: block;
  width: 2.75rem;
  height: 2rem;
  border-radius: .55rem;
  border: 2px solid var(--ramily-ink-soft);
  background: var(--ramily-surface);
  transition: transform var(--ramily-ease), box-shadow var(--ramily-ease);
}
.ramily-border-style:hover .ramily-border-style-preview { transform: translateY(-1px); }
.ramily-border-style input:checked + .ramily-border-style-preview {
  border-color: var(--ramily-sage);
  box-shadow: 0 0 0 2px var(--ramily-surface), 0 0 0 4px var(--ramily-sage);
}
.ramily-border-style input:focus-visible + .ramily-border-style-preview {
  box-shadow: 0 0 0 2px var(--ramily-surface), 0 0 0 4px var(--ramily-ink);
}

/* --- Menú del calendario (hamburguesa + offcanvas) ----------------------- */
.ramily-menu-toggle {
  border-color: var(--ramily-line);
  color: var(--ramily-ink-soft);
  line-height: 1;
  font-size: 1.1rem;
  padding: .4rem .65rem;
}
.ramily-menu-toggle:hover { color: var(--ramily-ink); }

.ramily-menu-back {
  color: var(--ramily-ink-soft);
}
.ramily-menu-back:hover { color: var(--ramily-sage-dark); }

.ramily-menu-links { gap: .2rem; }
.ramily-menu-links .nav-link {
  color: var(--ramily-ink-soft);
  font-weight: 550;
  border-radius: .6rem;
  padding: .55rem .8rem;
  transition: background var(--ramily-ease), color var(--ramily-ease);
}
.ramily-menu-links .nav-link:hover { background: var(--ramily-sage-soft); color: var(--ramily-ink); }
.ramily-menu-links .nav-link.active {
  color: var(--ramily-sage-dark);
  background: var(--ramily-sage-soft);
}
.ramily-menu {
  width: min(18rem, 85vw);
  background: var(--ramily-surface);
}

/* --- Barra de año -------------------------------------------------------- */
.ramily-year-bar {
  position: sticky;
  top: 3.4rem;               /* justo debajo de la barra superior */
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding: .55rem .75rem;
  background: rgba(249, 243, 232, .9);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border: 1px solid var(--ramily-line);
  border-radius: 999px;
}
.ramily-year-select { width: auto; min-width: 5.5rem; }

/* --- La rejilla anual ---------------------------------------------------- */
/* Scroll vertical continuo de enero a diciembre (negocio.md §14). En pantallas
   anchas los meses se reparten en columnas: se sigue bajando por el año, pero
   se abarca más de un vistazo. */
.ramily-year {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px)  { .ramily-year { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1400px) { .ramily-year { grid-template-columns: repeat(3, 1fr); } }

.ramily-month {
  background: var(--ramily-surface);
  border: 1px solid var(--ramily-line);
  border-radius: var(--ramily-radius);
  box-shadow: var(--ramily-shadow);
  padding: 1rem 1.1rem 1.15rem;
}
.ramily-month-name {
  font-size: 1.1rem;
  font-weight: 650;
  letter-spacing: -.01em;
  margin: 0 0 .75rem;
  color: var(--ramily-sage-dark);
}

.ramily-weekdays,
.ramily-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .22rem;
}
.ramily-weekdays {
  margin-bottom: .3rem;
}
.ramily-weekdays abbr {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ramily-ink-soft);
  text-decoration: none;
  cursor: default;
}
.ramily-week + .ramily-week { margin-top: .22rem; }

/* Casilla de día. min-height mantiene el objetivo táctil cómodo en móvil
   (negocio.md §42) sin que la rejilla se descuadre. */
.ramily-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-height: 2.4rem;
  border-radius: .45rem;
  /* El número es lo único que hay que leer en cada casilla, y con 365 de
     ellas apretadas se quedaba pequeño de más — sobre todo en el móvil,
     donde encima se toca con el dedo. Más grande en general, no solo ahí. */
  font-size: 1.2rem;
  font-weight: 0;
  /* OJO: aquí NO va overflow:hidden. El rayado de «hoy» (más abajo) es un
     pseudo-elemento que se sale A PROPÓSITO fuera de esta caja, y con
     overflow:hidden el navegador lo recorta sin más y desaparece entero. Lo
     que de verdad necesita recortarse a la forma redondeada son las bandas
     de custodia, así que ese overflow vive en ellas (ver .ramily-day-bands),
     no aquí. */
  /* Al saltar a un día por su ancla, que no quede tapado por las barras fijas. */
  scroll-margin-top: 8rem;
}
.ramily-day.is-outside { visibility: hidden; }

/* Sin asignar (§15). Relleno tenue en vez de borde punteado: con 365 casillas,
   el punteado convertía el año entero en ruido. Así el ojo va directo a lo que
   SÍ tiene color, y lo vacío se reconoce igual de bien —sobre todo en cuanto
   hay algún día asignado al lado. */
.ramily-day.is-free {
  border: 1px solid transparent;
  background: #F2F5F2;
  color: var(--ramily-ink-soft);
}
/* Con custodia: manda el color. */
.ramily-day.is-taken {
  border: 1px solid transparent;
  color: var(--ramily-ink);
}
.ramily-day.is-weekend .ramily-day-number { opacity: .72; }

/* Las bandas de color: una por custodio, para que un día compartido se vea
   compartido (negocio.md §9.4). El recorte a la forma redondeada de la
   casilla vive AQUÍ (antes estaba en .ramily-day; ver el porqué del cambio
   ahí): las bandas son rectángulos sin más, y sin este overflow asomarían en
   escuadra por las esquinas redondeadas. */
.ramily-day-bands {
  position: absolute;
  inset: 0;
  display: flex;
  border-radius: inherit;
  overflow: hidden;
}
.ramily-day-bands > span { flex: 1 1 0; opacity: .42; }
/* Separador fino entre custodios: sin él, dos colores contiguos se funden y un
   día compartido puede parecer uno solo. */
.ramily-day-bands > span + span { border-left: 1px solid var(--ramily-surface); }

.ramily-day-number { position: relative; z-index: 1; }

/* Puntos de aviso: evento y nota del día (§15, §16.1). Agrupados en fila para
   que quepan los dos sin solaparse, y siempre centrados aunque solo haya uno.
   Coral, reservado para avisos puntuales (§39). El halo blanco es lo que los
   hace VISIBLES de verdad: sin él, sobre una banda de custodia de un tono
   parecido (coral, rosa, ámbar son colores de custodio posibles) el punto se
   funde con el fondo y desaparece — que es justo lo que pasaba antes. */
.ramily-day-marks {
  position: absolute;
  bottom: .16rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .18rem;
  z-index: 1;
}
.ramily-day-mark {
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: var(--ramily-coral);
  box-shadow: 0 0 0 1.5px var(--ramily-surface);
}
/* El de evento, más grande y con el coral oscuro (no el de marca): así se ve
   incluso sobre una banda de custodia coral, donde el coral normal se
   confundía con el fondo (mistareas.md). */
.ramily-day-mark--event {
  width: .55rem;
  height: .55rem;
  background: var(--ramily-coral-dark);
}

/* Hoy: borde A RAYAS. Es el ÚNICO sitio que usa coral para señalar (§14.2);
   por eso los tipos de día (justo debajo) no pueden elegir coral en su
   paleta — si pudieran, un tipo cualquiera se confundiría con «hoy».
   Va en un pseudo-elemento con `border` (no `box-shadow`, que no admite
   rayado, ni `outline`, que ya usa :focus-visible más abajo) para que
   conviva sin pisarse con el anillo SÓLIDO de los tipos de día: si un día es
   HOY y además tiene un tipo, se ven los dos lenguajes visuales a la vez,
   cada uno el suyo, en vez de tener que adivinar cuál manda. */
.ramily-day.is-today { font-weight: 700; }
/* El número, más grande además de en negrita: el peso solo ya costaba verse
   en una cifra de un dígito, y es lo primero que se busca al mirar la
   rejilla ("¿dónde estoy?"). */
.ramily-day.is-today .ramily-day-number { font-size: 1.25em; }
.ramily-day.is-today::after {
  content: '';
  position: absolute;
  /* Un hueco de por medio (aquí, y en el borde del tipo, más abajo) para que
     el rayado no toque el anillo sólido del tipo: pegados, los dos colores se
     funden en uno y ninguno se distingue del otro. */
  inset: -4px;
  border: 2px dashed var(--ramily-coral);
  border-radius: calc(.45rem + 4px);
  pointer-events: none;
  z-index: 2;
}
/* Al llegar por el enlace «Hoy» (o por cualquier #dia-…), un parpadeo breve
   para localizar la casilla. Independiente de is-today: sirve para CUALQUIER
   día al que se llegue por ancla. */
.ramily-day.is-pinged { animation: ramily-ping 1.4s ease-out 2; }
@keyframes ramily-ping {
  0%, 100% { box-shadow: 0 0 0 2px var(--ramily-coral); }
  50%      { box-shadow: 0 0 0 6px rgba(247, 145, 113, .35); }
}

/* Tipo de día: festivo, no lectivo… (§16.2, enmienda V1.3). Anillo SÓLIDO Y
   GRUESO, pero DENTRO de la casilla — no fuera, como el rayado de «hoy»,
   justo arriba—: entre una casilla y la siguiente solo hay un margen de
   unos pocos píxeles (365 casillas apretadas), y ahí no cabían dos anillos
   por fuera sin que se pisaran. Así cada indicador vive en su sitio: el
   rayado de «hoy» por fuera, el anillo del tipo por dentro, y los dos se ven
   a la vez sin competir por el mismo espacio. Va en su propio
   pseudo-elemento (no box-shadow) con z-index por encima de las bandas de
   custodia —que si no, lo taparían a medias con su transparencia— y por
   debajo del número y los puntos de aviso.

   El TRAZO (seguido, rayas, puntos) lo elige el usuario al crear el tipo,
   además del color (§16.2 enmienda): con muchos tipos, dos colores pueden
   quedar parecidos, y el trazo es una segunda forma de distinguirlos que no
   depende de acertar el color a simple vista. Llega por variable CSS, igual
   que el color — ver day-cell.php. */
.ramily-day.has-type::before,
.ramily-medit-day.has-type::before {
  content: '';
  position: absolute;
  inset: 0;
  border-width: 3px;
  border-color: var(--ramily-type-ring, transparent);
  border-style: var(--ramily-type-ring-style, solid);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* Las casillas son enlaces: que no parezcan texto enlazado. */
a.ramily-day {
  text-decoration: none;
  color: inherit;
  transition: transform var(--ramily-ease), box-shadow var(--ramily-ease);
}
a.ramily-day:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px -4px rgba(46, 58, 52, .45);
}
/* Ni el rayado de «hoy» ni el anillo del tipo viven en box-shadow (los dos
   son pseudo-elementos aparte), así que el hover —que reemplaza el
   box-shadow entero— no se los lleva por delante: no hace falta ningún
   :hover especial para conservarlos. */
a.ramily-day:focus-visible {
  outline: 2px solid var(--ramily-ink);
  outline-offset: 1px;
}

/* --- Panel del día ------------------------------------------------------- */
.ramily-offcanvas {
  background: var(--ramily-surface);
  border-left: 1px solid var(--ramily-line);
  width: min(26rem, 92vw);
}
.ramily-offcanvas .offcanvas-header { padding-bottom: 0; }
.ramily-day-panel .form-check { margin-bottom: .4rem; }
.ramily-day-panel legend.form-label { font-size: .875rem; }

/* --- Eventos del día ----------------------------------------------------- */
.ramily-event {
  padding: .6rem 0;
  border-bottom: 1px solid var(--ramily-line);
}
.ramily-event:last-child { border-bottom: 0; }
.ramily-event-time {
  flex: 0 0 3.1rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: .85rem;
  color: var(--ramily-sage-dark);
  padding-top: .1rem;
}

/* «Sin asignar» en la ficha del día: mismo lenguaje visual que en la rejilla. */
.ramily-unassigned {
  display: inline-block;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: #F2F5F2;
  color: var(--ramily-ink-soft);
  font-size: .85rem;
}

/* En móvil el panel entra por abajo: es donde llega el pulgar. */
@media (max-width: 575.98px) {
  .ramily-offcanvas {
    width: 100%;
    height: 88vh;
    top: auto;
    bottom: 0;
    border-left: 0;
    border-top-left-radius: var(--ramily-radius);
    border-top-right-radius: var(--ramily-radius);
    transform: translateY(100%);
  }
  .ramily-offcanvas.showing,
  .ramily-offcanvas.show { transform: translateY(0); }
}

/* --- Columna lateral, fija al hacer scroll -------------------------------
   Para lo que va en la columna corta junto a un contenido largo (el detalle
   de un día en la vista pública, el formulario de nota nueva en notes.php):
   en pantalla ancha se queda a la vista aunque se baje por el resto. */
@media (min-width: 992px) {
  .ramily-legend-wrap { position: sticky; top: 8rem; }
}
.ramily-swatch--sm { width: 1.05rem; height: 1.05rem; border-radius: .3rem; }
/* Muestra de un tipo de día (§16.2): un ANILLO, no un relleno — para que se
   reconozca como la misma cosa que se ve en la rejilla, y no se confunda con
   los colores (rellenos) de custodia. `border` de verdad, no box-shadow (que
   no admite rayado ni punteado): reutiliza las mismas variables CSS que la
   casilla, color Y trazo. */
.ramily-swatch--ring {
  background: transparent;
  border-radius: 50%;
  border-width: 2px;
  border-color: var(--ramily-type-ring, var(--ramily-ink-soft));
  border-style: var(--ramily-type-ring-style, solid);
}

/* --- De dónde sale la custodia de un día --------------------------------- */
/* Un aviso, no una alarma: explica quién decide ese día (§16). Sobrio a
   propósito, como el histórico: que un día siga un patrón no es nada malo. */
.ramily-origin {
  padding: .7rem .85rem;
  border-radius: .6rem;
  border-left: 3px solid var(--ramily-sage);
  background: var(--ramily-sage-soft);
  color: var(--ramily-ink-soft);
}

/* --- Histórico ----------------------------------------------------------- */
/* Deliberadamente sobrio: el histórico cuenta hechos, no alarmas (§33). Nada de
   rojos, iconos de advertencia ni colores que sugieran que un cambio fue malo. */
.ramily-timeline { margin: 0; }

.ramily-timeline-day {
  position: sticky;
  top: 3.4rem;
  z-index: 2;
  margin: 1.25rem 0 .5rem;
  padding: .2rem 0;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ramily-ink-soft);
  background: var(--ramily-cream);
}
.ramily-timeline-day:first-child { margin-top: 0; }

.ramily-timeline-item {
  background: var(--ramily-surface);
  border: 1px solid var(--ramily-line);
  border-radius: var(--ramily-radius-sm);
  padding: .7rem .9rem;
  margin-bottom: .4rem;
}

.ramily-timeline-time {
  flex: 0 0 2.9rem;
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ramily-sage-dark);
}

.ramily-timeline-detail { margin-top: .5rem; }
.ramily-timeline-detail > summary {
  cursor: pointer;
  font-size: .8rem;
  color: var(--ramily-sage-dark);
  list-style: none;
}
.ramily-timeline-detail > summary::-webkit-details-marker { display: none; }
.ramily-timeline-detail > summary::before { content: '▸ '; }
.ramily-timeline-detail[open] > summary::before { content: '▾ '; }
.ramily-timeline-detail table { font-size: .85rem; }
.ramily-timeline-detail th[scope="row"] { width: 8rem; }

/* --- Pie ---------------------------------------------------------------- */
.ramily-footer {
  margin-top: auto;
  padding: 2rem 0 2.5rem;
  color: var(--ramily-ink-soft);
  font-size: .85rem;
}
.ramily-footer .ramily-motto { font-style: italic; }
.ramily-footer-link { color: inherit; text-decoration: underline; text-decoration-color: transparent; }
.ramily-footer-link:hover { text-decoration-color: currentColor; }

/* --- Utilidades --------------------------------------------------------- */
.ramily-dot {
  width: .55rem; height: .55rem;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}
.ramily-stack-tight > * + * { margin-top: .35rem; }

/* --- Editor mensual ágil (negocio.md §11, §16.2) -------------------------- */
/* Bootstrap pinta TODO modal con `--bs-modal-bg: var(--bs-body-bg)`, y aquí
   `--bs-body-bg` es el crema de la app (ramily.css, arriba), no blanco. Contra
   ese crema, el gris clarito de un día libre (más abajo, `#F2F5F2`) pierde el
   contraste que sí tiene en la vista anual, donde la tarjeta del mes es
   blanca de verdad (`.ramily-month`). Aquí se iguala a eso, sin tocar la
   variable global (no hace falta que TODOS los modales de la app cambien). */
.ramily-month-editor .modal-content {
  background: var(--ramily-surface);
}

/* Cabecera de la tarjeta de mes, con el lápiz que abre el editor. */
.ramily-month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .75rem;
}
.ramily-month-head .ramily-month-name { margin: 0; }
.ramily-month-edit-btn {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--ramily-sage-soft);
  color: var(--ramily-sage-dark);
  transition: background var(--ramily-ease), color var(--ramily-ease);
}
.ramily-month-edit-btn svg { width: 1rem; height: 1rem; }
.ramily-month-edit-btn:hover,
.ramily-month-edit-btn:focus-visible {
  background: var(--ramily-sage);
  color: #fff;
}

/* Los pinceles: uno o varios custodios, o uno o varios tipos de día. El color
   de cada chip llega por variable CSS, igual que las bandas de la rejilla y
   el anillo de los tipos — así el editor no inventa un segundo lenguaje de
   color para lo mismo. */
.ramily-chip-toggle {
  --ramily-chip-color: var(--ramily-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  border: 1.5px solid var(--ramily-line);
  background: var(--ramily-surface);
  color: var(--ramily-ink);
  font-size: .85rem;
  font-weight: 600;
  transition: all var(--ramily-ease);
}
.ramily-chip-toggle:hover { border-color: var(--ramily-chip-color); }
.ramily-chip-toggle.is-active {
  background: var(--ramily-chip-color);
  border-color: var(--ramily-chip-color);
  color: #fff;
}
.ramily-chip-toggle--clear { border-style: dashed; }
.ramily-chip-toggle--clear.is-active { background: var(--ramily-ink-soft); border-color: var(--ramily-ink-soft); color: #fff; }
.ramily-chip-dot {
  width: .6rem; height: .6rem;
  border-radius: 50%;
  background: var(--ramily-chip-color);
  flex: 0 0 auto;
}
.ramily-chip-toggle.is-active .ramily-chip-dot { background: #fff; }
.ramily-chip-ring {
  width: .6rem; height: .6rem;
  border-radius: 2px;
  border: 2px var(--ramily-chip-style, solid) var(--ramily-chip-color);
  flex: 0 0 auto;
}
.ramily-chip-toggle.is-active .ramily-chip-ring { border-color: #fff; }

.ramily-brush-status {
  font-size: .85rem;
  color: var(--ramily-ink-soft);
  background: var(--ramily-sage-soft);
  border-radius: .6rem;
  padding: .55rem .8rem;
}

/* La rejilla del editor: mismo dibujo que .ramily-day (bandas, anillo de
   tipo, hoy), pero un <button> pintable, no un enlace. */
.ramily-medit-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .3rem;
}
.ramily-medit-day {
  position: relative;
  aspect-ratio: 1;
  min-height: 2.6rem;
  border: 1px solid transparent;
  border-radius: .5rem;
  background: #F2F5F2;
  color: var(--ramily-ink);
  font-size: 1.05rem;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  /* `manipulation`, NO `none`: con `none` la casilla se queda el gesto y dentro
     del modal no se puede bajar por el mes con el dedo (ver ramily.js). */
  touch-action: manipulation;
}
.ramily-medit-day:hover { filter: brightness(1.05); }
.ramily-medit-day.is-outside { visibility: hidden; }
.ramily-medit-day.is-weekend { opacity: .85; }
.ramily-medit-day.is-today { outline: 2px dashed var(--ramily-coral); outline-offset: 2px; }
.ramily-medit-day .ramily-day-number { position: relative; z-index: 1; }
.ramily-medit-day .ramily-day-bands { border-radius: inherit; }
/* Cambio sin guardar todavía (dentro de esta sesión del editor): un punto
   discreto, no una alarma — se aplicará todo junto al pulsar "Guardar mes". */
.ramily-medit-day.is-dirty::after {
  content: '';
  position: absolute;
  bottom: .2rem; right: .2rem;
  width: .4rem; height: .4rem;
  border-radius: 50%;
  background: var(--ramily-sage);
  box-shadow: 0 0 0 1.5px var(--ramily-surface);
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}