/* Diario de sueño: una rejilla de 24 h por noche. Claro = en la cama despierto; azul = dormido. */
.su { display: grid; gap: 44px; }
.su-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; margin-bottom: 14px; }
.su-cab h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.1; }
.su-cab h2 em { color: var(--azul); }
.su-chip { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--linea); background: #fff; font-size: 15px; cursor: pointer; }
.su-icono { width: 42px; padding: 0; font-size: 18px; }
.su-texto { margin: 12px 0 0; min-height: 2.8em; font-family: var(--display); font-style: italic; font-size: clamp(19px, 2.3vw, 24px); color: var(--azul); max-width: 56ch; }
.su-mio { padding-top: 34px; border-top: 1px solid var(--linea); display: grid; gap: 14px; }
.su-ayuda { margin: 0; font-size: 15px; color: var(--cuerpo); max-width: 64ch; }
.su-svg { width: 100%; height: auto; display: block; overflow: visible; }
.su-pad { touch-action: none; }
.su-pad .su-svg { touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.su-noche { fill: #EEF1F4; }
.su-hora { stroke: #DDE2E6; stroke-width: 1; }
.su-hora.medianoche { stroke: var(--nota); stroke-dasharray: 3 4; }
.su-hora-t { font-family: var(--mono); font-size: 12px; fill: var(--nota); letter-spacing: .06em; }
.su-svg.estrecho .su-hora-t { font-size: 13px; }
.su-carril { fill: transparent; stroke: #E4E7EA; stroke-width: 1; }
.su-dia { font-family: var(--display); font-style: italic; font-size: 16px; fill: var(--tinta); }
.su-svg.estrecho .su-dia { font-size: 15px; }
.su-cama { fill: var(--azul-claro); stroke: var(--azul); stroke-width: 1.2; }
.su-dormido { fill: var(--azul); }
.su-total { font-family: var(--mono); font-size: 14px; fill: var(--tinta); }
.su-fila { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.su-fila.pre { opacity: 0; transform: translateX(-12px); }
.su-svg.a4 { margin-top: 6px; }
.su-svg.a4 .su-dia { font-size: 14px; }
.su-leyenda { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; font-size: 14px; color: var(--cuerpo); }
.su-leyenda i, .su-pinceles i { display: inline-block; width: 26px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 8px; }
i.cama { background: var(--azul-claro); border: 1.2px solid var(--azul); }
i.dormido { background: var(--azul); height: 16px; }
i.borra { background: #fff; border: 1.5px dashed var(--nota); }
.su-pinceles { display: flex; flex-wrap: wrap; gap: 8px; }
.su-pinceles button { min-height: 46px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--linea); background: #fff; font-size: 15px; cursor: pointer; }
.su-pinceles button[aria-checked="true"] { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.su-lab { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--nota); margin-bottom: 8px; }
.su-lab small { margin-left: 6px; }
.su-cal-filas { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.su-cal { display: flex; align-items: center; gap: 3px; }
.su-cal b { font-weight: 500; font-size: 14px; width: 34px; }
.su-cal button { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--linea); background: #fff; font-family: var(--mono); font-size: 12px; cursor: pointer; }
.su-cal button[aria-checked="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.su-cautela { margin: 0; padding: 10px 14px; background: #FBF0DD; border-radius: 10px; font-size: 14px; color: #6B4A12; max-width: 72ch; }