[data-au-theme="cuidado-domiciliario"] {
  /* Marca verificada de Salud Integral (MARCA.md 2026-08-30): marino en navbar/títulos,
     celeste SOLO como relleno/acento (2.6:1 sobre blanco: nunca texto). El rojo #F44336
     del sitio es un default de plugin, no marca — no se usa. */
  --au-secondary: #021229;           /* marino: header, títulos de sección */
  --au-secondary-content: #ffffff;
  --au-marca-celeste-fill: #30ABFF;  /* solo fondos/decoración, nunca color de texto */
  --au-marca-celeste-soft: #eaf6ff;  /* fondo suave para chips/hero */
  /* Colores del logo (SVG en línea): viven acá, no en el JS. */
  --au-marca-logo-teal: #1B7A8F;
  --au-marca-logo-marino: #23346D;
}

.si-app {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--au-space-4, 16px);
}

.si-suplanta {
  background: var(--au-warning-bg);
  color: var(--au-warning-text);
}

/* Barra de sesión: no hay componente de app-bar en la base, así que acá va lo
   mínimo, sólo con tokens ya existentes (marino de marca + su color de texto). */
.si-barra { background: var(--au-secondary); color: var(--au-secondary-content); }
.si-barra__inner { max-width: 720px; margin: 0 auto; padding: var(--au-space-3) var(--au-space-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--au-space-4); flex-wrap: wrap; }
.si-barra .au-btn--ghost { color: var(--au-secondary-content); border-color: var(--au-secondary-content); }
.si-marca, .si-sesion { display: flex; align-items: center; gap: var(--au-space-3); }
.si-marca__txt { display: flex; flex-direction: column; line-height: 1.25; font-size: var(--au-text-sm); }

/* Grupo de botones de opción (comidas, ánimo): el elegido se distingue por
   color Y por el texto "✓ elegido", que sólo aparece con aria-pressed="true". */
.si-opciones { display: flex; flex-wrap: wrap; gap: var(--au-space-2); }
.si-opciones .au-slot { flex: 1 1 150px; }
.si-elegido { display: none; }
[aria-pressed="true"] > .si-elegido { display: inline; font-weight: var(--au-weight-bold); }

.si-foto { display: block; max-width: 100%; border-radius: var(--au-radius); margin-bottom: var(--au-space-3); }
.si-pie { margin-top: var(--au-space-7); text-align: center; }

/* Encabezado de la vista de la familia: el celeste de marca sólo como fondo
   suave de decoración; el texto sigue siendo el color de contenido de la base. */
.si-hero { background: var(--au-marca-celeste-soft); }

/* Bitácora de la familia: la cita textual de la cuidadora y su firma. */
.si-cita { margin: var(--au-space-3) 0 0; padding-left: var(--au-space-3);
  border-left: 3px solid var(--au-marca-celeste-fill); font-style: italic; }
.si-cita p { margin: 0; }
.si-firma { margin-top: var(--au-space-3); font-size: var(--au-text-sm); color: var(--au-base-content-50); }
.si-app .au-timeline__item .au-btn { margin-top: var(--au-space-3); }

/* Ficha del reporte dentro del <dialog>. */
.si-dl { margin: 0; }
.si-dl dt { font-weight: var(--au-weight-semibold); margin-top: var(--au-space-3); }
.si-dl dd { margin: 0; }
.si-med { margin: var(--au-space-1) 0 0; }

/* La base dibuja la casilla de medicamentos de 24px dentro de un <label> de 48
   (el área táctil es el label). Acá las cuidadoras marcan con el pulgar en el
   celular, así que la casilla misma se lleva los 48px. No se toca la base:
   el ajuste vive en la marca. */
.si-app .au-med__check input[type="checkbox"] { width: 48px; height: 48px; }

/* Con la casilla más grande, el nombre del medicamento quedaba pegado al borde
   de la casilla en el celular. */
.si-app .au-med__body { padding-right: var(--au-space-3); min-width: 0; }

/* Cuarto estado del semáforo: el turno todavía no cierra. No es un problema,
   así que no toma ni el ámbar del atraso ni el rojo de la falta: usa el azul
   informativo que ya trae la base. */
.au-badge--curso { background: var(--au-info-bg); color: var(--au-info-text); }
.au-traffic__item--curso { background: var(--au-info-bg); }
.au-traffic__item--curso .au-traffic__dot { background: var(--au-info); }
.au-traffic__item--curso .au-traffic__n { color: var(--au-info-text); }

/* En notebook el panel de dirección se lee como panel: más ancho que una
   columna de lectura, los cuatro indicadores en una fila y la tabla holgada.
   El celular no se toca. */
@media (min-width: 1024px) {
  .si-app--panel { max-width: 1080px; }
  .si-barra--panel .si-barra__inner { max-width: 1080px; }
  .si-app--panel .au-kpis { grid-template-columns: repeat(4, 1fr); }
  /* Los tres filtros en una fila: en el panel no hay razón para apilarlos. */
  .si-filtros { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--au-space-4); align-items: end; }
}