/* Agenda Notaría — ilustraciones decorativas de las tarjetas.
 *
 * Van como SVG embebido en `background-image` y no como <img> a propósito:
 *
 * - Son decoración, no información. Metidas en el CSS no llegan al DOM, así
 *   que un lector de pantalla no las nombra ni hay que acordarse de ponerles
 *   un alt vacío en cada sitio.
 * - No son una petición más al servidor: viajan dentro de la hoja de estilos,
 *   que ya se descarga igualmente y se guarda en la caché sin conexión.
 * - Se tiñen con los tonos suaves de la marca, siempre por detrás del
 *   contenido y a baja opacidad: una tarjeta tiene que leerse igual de bien
 *   con ilustración que sin ella.
 *
 * Todas se anclan abajo a la derecha y no se repiten, para que el texto entre
 * por la izquierda sin pisarlas.
 */

/* Onda suave: el fondo por defecto de cualquier tarjeta que no pida otra cosa.
   Es lo que evita que queden planas y en blanco. */
.ilustra {
  position: relative;
  background-repeat: no-repeat;
  background-position: right bottom;
}

.ilustra--onda {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120'%3E%3Cpath d='M0 96c40 0 62-34 104-34s60 26 92 20 44-26 44-26v64H0z' fill='%23481c5f' fill-opacity='.07'/%3E%3Cpath d='M0 112c46 0 70-26 112-26s58 20 90 16 38-14 38-14v32H0z' fill='%23481c5f' fill-opacity='.05'/%3E%3C/svg%3E");
  background-size: 62% auto;
}

/* Montaña: «asuntos propios», los días sueltos que uno se toma. */
.ilustra--montana {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'%3E%3Ccircle cx='150' cy='30' r='14' fill='%23481c5f' fill-opacity='.12'/%3E%3Cpath d='M0 120l52-62 34 40 26-30 48 52z' fill='%23481c5f' fill-opacity='.13'/%3E%3Cpath d='M96 120l44-52 60 52z' fill='%23481c5f' fill-opacity='.09'/%3E%3C/svg%3E");
  background-size: 52% auto;
}

/* Palmera y dunas: vacaciones. */
.ilustra--palmera {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'%3E%3Ccircle cx='168' cy='24' r='13' fill='%23481c5f' fill-opacity='.12'/%3E%3Cpath d='M104 118c2-30 6-50 12-64' stroke='%23481c5f' stroke-opacity='.28' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M116 54c-16-10-32-8-42 2 14-2 24 0 34 6zM116 54c16-12 34-10 44 2-16-4-28-2-38 4zM116 54c-6-18 2-32 16-38-8 12-11 24-9 36zM116 54c14-6 30-2 36 12-12-8-24-10-34-6z' fill='%23481c5f' fill-opacity='.22'/%3E%3Cpath d='M0 120c30 0 44-16 74-16s44 16 74 16 52-10 52-10v10z' fill='%23481c5f' fill-opacity='.1'/%3E%3C/svg%3E");
  background-size: 56% auto;
}

/* Silueta de persona: tarjetas de recepción y de personal. */
.ilustra--persona {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 120'%3E%3Ccircle cx='104' cy='44' r='22' fill='none' stroke='%23481c5f' stroke-opacity='.14' stroke-width='7'/%3E%3Cpath d='M66 116c0-24 17-40 38-40s38 16 38 40' fill='none' stroke='%23481c5f' stroke-opacity='.14' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: auto 78%;
  background-position: right 1.2rem bottom -1.2rem;
}

/* Reloj: bloques de horarios y de tiempo. */
.ilustra--reloj {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 120'%3E%3Ccircle cx='92' cy='62' r='40' fill='none' stroke='%23481c5f' stroke-opacity='.12' stroke-width='7'/%3E%3Cpath d='M92 38v26l18 10' fill='none' stroke='%23481c5f' stroke-opacity='.14' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: auto 74%;
  background-position: right 1rem bottom -0.8rem;
}

/* Gráfico: bloques de estadísticas. */
.ilustra--grafico {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 120'%3E%3Crect x='40' y='68' width='20' height='44' rx='7' fill='%23481c5f' fill-opacity='.11'/%3E%3Crect x='72' y='44' width='20' height='68' rx='7' fill='%23481c5f' fill-opacity='.14'/%3E%3Crect x='104' y='82' width='20' height='30' rx='7' fill='%23481c5f' fill-opacity='.1'/%3E%3C/svg%3E");
  background-size: auto 62%;
  background-position: right 1.1rem bottom 0.6rem;
}

/* ---------- Estado vacío ----------
   Carpeta con destellos, centrada. Aquí la ilustración sí es el contenido —es
   lo único que hay cuando no hay datos—, así que va más grande y más visible
   que las decorativas de fondo. */

.vacio-ilustrado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 2.2rem 1rem;
  text-align: center;
}

.vacio-ilustrado::before {
  content: "";
  width: 8.5rem;
  height: 6.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 130'%3E%3Ccircle cx='85' cy='62' r='52' fill='%23481c5f' fill-opacity='.06'/%3E%3Cpath d='M40 52h30l9 11h51a8 8 0 0 1 8 8v34a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8V60a8 8 0 0 1 8-8z' fill='%23481c5f' fill-opacity='.5'/%3E%3Cpath d='M32 74h106a6 6 0 0 1 6 7l-6 26a8 8 0 0 1-8 6H40a8 8 0 0 1-8-6z' fill='%23481c5f' fill-opacity='.28'/%3E%3Cpath d='M58 30l3 7 7 3-7 3-3 7-3-7-7-3 7-3zM112 22l2 5 5 2-5 2-2 5-2-5-5-2 5-2zM92 44l2 4 4 2-4 2-2 4-2-4-4-2 4-2z' fill='%23481c5f' fill-opacity='.4'/%3E%3C/svg%3E") center/contain no-repeat;
}

.vacio-ilustrado__titulo {
  margin: 0;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--texto);
}

.vacio-ilustrado__nota {
  margin: 0;
  color: var(--texto-tenue);
  font-size: 0.85rem;
}