/* «Horas»: el dia elegido de «Esta semana» como cronograma (public/tareas-tiempo.js y tareas-tiempo-ui.js; lienzo aprobado el 2026-10-14).
   Solo tokens de Cuarto Oscuro: ningun color, sombra ni tamano de letra escrito a mano (paridad-cuarto-oscuro). Las posiciones vienen del modelo como numeros en
   variables propias (--tt-top, --tt-alto, --tt-ln, --tt-nl) y aqui se vuelven pixeles. Nada se anima: es lo que se usa cien veces al dia y lo que se hace con teclado. */

/* La seccion es la hermana del bloque (como .ini-enfoque): entre la tira y la lista. Solo existe si la persona tiene la vista; vacia no estorba. */
:root[data-theme] .ini-tt{ display:flex; flex-direction:column; gap:var(--e-3); min-width:0; container-type:inline-size; container-name:tt; }
:root[data-theme] .ini-tt[hidden]{ display:none; }
:root[data-theme] .tt-cambiar:empty, :root[data-theme] .tt-panel:empty{ display:none; }

/* El selector: pildoras. Debajo de la tira y no arriba a la derecha, que es del asa y del ··· del bloque. */
:root[data-theme] .tt-seg{ display:inline-flex; align-self:flex-start; gap:2px; padding:2px; border-radius:var(--r-pildora); background:var(--pag); }
:root[data-theme] .tt-vb{ appearance:none; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; margin:0; padding:0 14px; border:0; border-radius:var(--r-pildora); background:none; color:var(--medio); font:inherit; font-size:var(--t-texto); cursor:pointer; }
:root[data-theme] .tt-vb.on{ background:var(--piedra-on); color:var(--tinta); font-weight:500; }
@media (hover:hover){ :root[data-theme] .tt-vb:not(.on):hover{ color:var(--tinta); } }
@container tt (max-width:520px){
  :root[data-theme] .tt-seg{ display:flex; align-self:stretch; }
  :root[data-theme] .tt-vb{ flex:1; min-height:40px; }
}

/* Cuando Horas tiene algo que ensenar, la lista de siempre se esconde. Falla ABIERTO: con el panel vacio (vista Lista, o un error al pintar) la lista sigue a la
   vista. Nunca `hidden` sobre #diaria (sincDiaria() se lo quita, regla 22 de docs/contexto/inicio-a-la-medida.md) y nunca se esconde #riel-cal. El peso de esta regla
   le gana a `#ini-tareas-hoy .diaria:not([hidden]){display:block}` de cuarto-oscuro.css. */
:root[data-theme] .ini-top:has(> .ini-tt[data-vista="horas"] > .tt-panel:not(:empty)) > #ini-tareas-hoy > #diaria{ display:none; }

/* El encabezado del dia (la lista lo trae dentro de #diaria, que aqui esta escondida) y el «+». */
:root[data-theme] .tt-dh{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-2); margin-top:var(--e-2); }
:root[data-theme] .tt-dia, :root[data-theme] .tt-q{ font-size:var(--t-meta); line-height:16px; color:var(--medio); }
:root[data-theme] .tt-mas{ appearance:none; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; margin:0; padding:0; border:0; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); cursor:pointer; }
@media (pointer:coarse){ :root[data-theme] .tt-mas{ width:44px; height:44px; } }

/* La bandeja «Sin hora». Siempre trae su borde (transparente) para que al arrastrar solo cambie el color y no el tamano. */
:root[data-theme] .tt-bandeja, :root[data-theme] .tt-todo{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); padding:var(--e-2); margin:0 calc(var(--e-2) * -1); border:1.5px solid transparent; border-radius:var(--r-flota); }
:root[data-theme] .tt-bandeja .tt-q, :root[data-theme] .tt-todo .tt-q{ margin-right:var(--e-1); }
:root[data-theme] .tt-bandeja:not(:has(.tt-chip)) .tt-q{ margin-right:0; }
:root[data-theme] .tt-chip{ appearance:none; box-sizing:border-box; display:inline-block; max-width:100%; height:32px; margin:0; padding:0 var(--e-3); border:0; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font:inherit; font-size:var(--t-texto); line-height:32px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:grab; }
:root[data-theme] .tt-chip.tt-chip-e{ background:none; border:1px dashed var(--punto); color:var(--medio); line-height:30px; cursor:pointer; }
@media (pointer:coarse){ :root[data-theme] .tt-chip{ height:40px; line-height:40px; } }

:root[data-theme] .tt-vacio{ margin:0; padding:var(--e-3) 0 0; color:var(--medio); font-size:var(--t-texto); line-height:20px; }
:root[data-theme] .tt-vacio b{ display:block; color:var(--tinta); font-weight:500; }
:root[data-theme] .tt-cargando, :root[data-theme] .tt-error{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--e-3); padding:var(--e-4) 0; color:var(--medio); }
:root[data-theme] .tt-hueso{ display:block; width:100%; height:44px; border-radius:var(--r); background:var(--piedra-on); opacity:.5; }

/* La rejilla: las horas a la izquierda (52 px de margen), las lineas, los bloques y la linea de ahora. */
:root[data-theme] .tt-rej{ position:relative; height:calc(var(--tt-alto) * 1px); margin:var(--e-4) 0 var(--e-2) 52px; }
:root[data-theme] .tt-ln{ position:absolute; left:0; right:0; top:calc(var(--tt-top) * 1px); height:0; border-top:1px solid var(--linea); }
:root[data-theme] .tt-hl{ position:absolute; left:-52px; width:42px; top:calc(var(--tt-top) * 1px); margin-top:-7px; text-align:right; font-size:var(--t-eti); line-height:14px; color:var(--apagado); font-variant-numeric:tabular-nums; }
:root[data-theme] .tt-blq{ appearance:none; box-sizing:border-box; position:absolute; margin:0; padding:5px var(--e-3); overflow:hidden; text-align:left; font:inherit; font-size:var(--t-texto); line-height:18px; border-radius:var(--r); border:0; background:var(--piedra-on); color:var(--tinta);
  top:calc(var(--tt-top) * 1px); height:calc(var(--tt-alto) * 1px); left:calc(var(--tt-ln) / var(--tt-nl) * 100% + 2px); width:calc(100% / var(--tt-nl) - 4px); cursor:pointer; }
:root[data-theme] .tt-blq.tt-t[data-ttmov="1"]{ cursor:grab; }
:root[data-theme] .tt-blq > span{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:root[data-theme] .tt-blq .tt-h, :root[data-theme] .tt-blq .tt-me{ font-size:var(--t-meta); color:var(--medio); font-variant-numeric:tabular-nums; }
:root[data-theme] .tt-blq .tt-ti{ font-size:var(--t-texto); }
/* El asa de abajo de una tarea: jalarla estira el bloque (cuanto dura). Una rayita al centro, tenue en reposo; el cursor cambia en el borde. Sin touch-action:none (la pagina
   dejaria de desplazarse con el dedo): como mover, estirar con el dedo pide mantener medio segundo. */
:root[data-theme] .tt-blq > .tt-asa{ position:absolute; left:0; right:0; bottom:0; height:12px; padding:0; cursor:ns-resize; }
:root[data-theme] .tt-blq > .tt-asa::after{ content:""; position:absolute; left:50%; bottom:3px; width:24px; height:3px; margin-left:-12px; border-radius:var(--r-pildora); background:currentColor; opacity:.28; }
:root[data-theme] .tt-blq:hover > .tt-asa::after, :root[data-theme] .tt-blq.tt-estirando > .tt-asa::after{ opacity:.75; }
:root[data-theme] .tt-blq.tt-estirando{ outline:1.5px solid var(--tinta); outline-offset:-1.5px; cursor:ns-resize; }
@media (pointer:coarse){ :root[data-theme] .tt-blq > .tt-asa{ height:20px; } }
/* Una cita o boda SE VE y no se mueve: punteada, sin fondo (mover una cita avisa al cliente y eso sigue en la Agenda). */
:root[data-theme] .tt-blq.tt-e{ background:none; border:1px dashed var(--punto); color:var(--medio); }
:root[data-theme] .tt-blq.tt-hecha{ background:none; color:var(--apagado); }
:root[data-theme] .tt-blq.tt-hecha .tt-ti{ text-decoration:line-through; }
/* La hora actual va en tinta y no en --urge: el rojo del calendario es solo de lo atrasado. */
:root[data-theme] .tt-ahora{ position:absolute; left:-6px; right:0; top:calc(var(--tt-top) * 1px); height:0; border-top:1.5px solid var(--tinta); pointer-events:none; }
:root[data-theme] .tt-ahora::before{ content:""; position:absolute; left:0; top:-4.5px; width:7px; height:7px; border-radius:50%; background:var(--tinta); }

/* Arrastrar: lo que se levanta deja su lugar punteado; el fantasma sigue al puntero; la linea dice a que hora caera; los destinos se marcan. */
:root[data-theme] .tt-blq.tt-alzada, :root[data-theme] .tt-chip.tt-alzada, :root[data-theme] .tt-card.tt-alzada{ background:none; border:1.5px dashed var(--punto); color:var(--apagado); }
:root[data-theme] .tt-fantasma{ position:fixed; z-index:var(--z-menu); pointer-events:none; box-sizing:border-box; display:flex; align-items:center; gap:var(--e-2); min-height:44px; max-width:260px; padding:var(--e-2) var(--e-4); border-radius:var(--r-flota); background:var(--piedra-on); color:var(--tinta); box-shadow:var(--sombra-flota); font-size:var(--t-texto); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:root[data-theme] .tt-prev{ position:absolute; left:0; right:0; top:calc(var(--tt-top) * 1px); height:0; border-top:2px solid var(--tinta); pointer-events:none; }
:root[data-theme] .tt-prev span{ position:absolute; left:-50px; top:-11px; min-width:44px; padding:0 6px; box-sizing:border-box; border-radius:var(--r-pildora); background:var(--boton); color:var(--boton-t); font-size:var(--t-meta); line-height:20px; font-weight:600; text-align:center; font-variant-numeric:tabular-nums; }
:root[data-theme] .ini-tt.tt-arrastrando .tt-bandeja{ border-style:dashed; border-color:var(--punto); }
:root[data-theme] .tt-bandeja.tt-sobre{ background:var(--tinte-toque); border-style:solid; border-color:var(--tinta); }
:root[data-theme] .ini-top:has(> .ini-tt.tt-arrastrando) #ini-cal-casa .cs-dia{ outline:1.5px dashed var(--punto); outline-offset:-2px; }
:root[data-theme] .ini-top #ini-cal-casa .cs-dia.tt-sobre, :root[data-theme] .ini-top #ini-cal-casa .cs-cel.tt-sobre{ background:var(--tinte-toque); color:var(--tinta); outline:1.5px solid var(--tinta); outline-offset:-2px; }
:root[data-theme] .ini-tt.tt-arrastrando{ -webkit-user-select:none; user-select:none; }

/* Con el dedo: mantener presionado levanta; el sistema no debe abrir su globo de seleccion ni su menu. Las filas NO llevan touch-action:none (la pagina dejaria de
   desplazarse): el desplazamiento solo se frena una vez levantado (touchmove no pasivo, en tareas-tiempo-ui.js). */
@media (pointer:coarse){
  :root[data-theme] .tt-blq, :root[data-theme] .tt-chip{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
}

/* El lector de pantalla oye los pasos del teclado; nadie los ve. */
:root[data-theme] .tt-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- La semana: siete columnas en escritorio, un dia debajo de otro en el telefono (lienzo, tableros 4 y 7) ---- */
/* Con la semana, la lista Y los dias de la tira se esconden; el encabezado de la tira (titulo, flechas, rango, «Hoy») se queda y sigue moviendo la semana. Falla ABIERTO como Horas,
   y NUNCA se esconde #riel-cal ni #ini-cal-casa (solo sus hijos): rielCalMarcarSel deja de sincronizar si el riel pierde su offsetParent. */
:root[data-theme] .ini-top:has(> .ini-tt[data-vista="semana"] > .tt-panel:not(:empty)) > #ini-tareas-hoy > #diaria{ display:none; }
:root[data-theme] .ini-top:has(> .ini-tt[data-vista="semana"] > .tt-panel:not(:empty)) > #ini-cal-casa :is(.cs-tira, .cs-dow, .cs-rejilla, .cs-pie){ display:none; }

:root[data-theme] .tt-sem{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px; margin-top:var(--e-2); }
/* Cada dia lleva su borde (transparente) para que al arrastrar solo cambie el color y no el tamano: todo el dia es destino. */
:root[data-theme] .tt-sdia{ display:flex; flex-direction:column; gap:6px; min-width:0; min-height:160px; padding-bottom:var(--e-2); border:1.5px solid transparent; border-radius:var(--r-flota); }
:root[data-theme] .tt-sdh{ appearance:none; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:2px; height:76px; margin:0; padding:var(--e-2) 0 0; border:0; border-radius:var(--r-flota); background:none; color:var(--tinta); font:inherit; cursor:pointer; }
:root[data-theme] .tt-sl{ font-size:var(--t-meta); line-height:16px; letter-spacing:.05em; color:var(--medio); }
:root[data-theme] .tt-sn{ display:flex; align-items:center; justify-content:center; min-width:34px; height:30px; border-radius:var(--r-pildora); font-size:var(--t-sub); font-weight:600; font-variant-numeric:tabular-nums; }
:root[data-theme] .tt-hoy .tt-sn{ box-shadow:0 0 0 1.5px var(--tinta); }
/* El unico rojo: un dia que ya paso y todavia tiene una tarea sin hacer (la misma regla que el numero de la tira). */
:root[data-theme] .tt-atr .tt-sn, :root[data-theme] .tt-atr .tt-sd{ color:var(--urge); font-weight:700; }
:root[data-theme] .tt-sd{ display:none; font-size:var(--t-texto); font-weight:600; }
:root[data-theme] .tt-carga{ display:block; flex:none; width:28px; height:4px; margin-top:6px; border-radius:var(--r-pildora); background:color-mix(in srgb, var(--tinta) 12%, transparent); overflow:hidden; }
:root[data-theme] .tt-carga i{ display:block; height:100%; border-radius:var(--r-pildora); background:var(--tinta); opacity:.75; }
:root[data-theme] .tt-carga[data-n="0"] i{ width:0; }
:root[data-theme] .tt-carga[data-n="1"] i{ width:34%; }
:root[data-theme] .tt-carga[data-n="2"] i{ width:67%; }
:root[data-theme] .tt-carga[data-n="3"] i{ width:100%; }
:root[data-theme] .tt-etiq{ display:block; flex:none; margin-top:2px; padding:0 6px; border:1px solid currentColor; border-radius:var(--r-pildora); font-size:var(--t-eti); font-weight:600; line-height:14px; color:var(--tinta); }
:root[data-theme] .tt-slista{ display:flex; flex-direction:column; gap:6px; min-width:0; }

:root[data-theme] .tt-card{ appearance:none; box-sizing:border-box; display:block; width:100%; margin:0; padding:6px 8px; border:0; border-radius:var(--r); background:var(--piedra-on); color:var(--tinta); text-align:left; font:inherit; font-size:var(--t-texto); line-height:18px; cursor:pointer; }
:root[data-theme] .tt-card.tt-t[data-ttmov="1"]{ cursor:grab; }
:root[data-theme] .tt-card > span{ display:block; min-width:0; }
:root[data-theme] .tt-card .tt-ti{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
:root[data-theme] .tt-card .tt-h, :root[data-theme] .tt-card .tt-me{ font-size:var(--t-meta); line-height:16px; color:var(--medio); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Una cita o boda SE VE y no se mueve: punteada y sin fondo, igual que en Horas. Lo hecho se ve atenuado y tachado. */
:root[data-theme] .tt-card.tt-e{ background:none; border:1px dashed var(--punto); padding:5px 7px; color:var(--medio); }
:root[data-theme] .tt-card.tt-hecha{ background:none; color:var(--apagado); }
:root[data-theme] .tt-card.tt-hecha .tt-ti{ text-decoration:line-through; }

:root[data-theme] .ini-tt.tt-arrastrando .tt-sdia{ border-style:dashed; border-color:var(--punto); }
:root[data-theme] .tt-sdia.tt-sobre{ background:var(--tinte-toque); border-style:solid; border-color:var(--tinta); }

/* El telefono (y un bloque a la mitad): los dias van uno debajo de otro y se suelta sobre el dia entero. Se decide por el ancho del BLOQUE, no de la ventana: con el chat
   abierto el CRM mide la mitad de la pantalla aunque la ventana sea grande. */
@container tt (max-width:700px){
  :root[data-theme] .tt-sem{ grid-template-columns:minmax(0, 1fr); gap:var(--e-4); }
  :root[data-theme] .tt-sdia{ min-height:0; padding:0 0 var(--e-1); gap:var(--e-1); }
  :root[data-theme] .tt-sdh{ flex-direction:row; align-items:center; justify-content:space-between; gap:var(--e-2); height:auto; min-height:44px; padding:0 var(--e-3); text-align:left; }
  :root[data-theme] .tt-sl, :root[data-theme] .tt-sn{ display:none; }
  :root[data-theme] .tt-sd{ display:block; flex:1; min-width:0; }
  :root[data-theme] .tt-carga, :root[data-theme] .tt-etiq{ margin-top:0; }
  :root[data-theme] .tt-slista{ gap:0; padding:0 var(--e-3); }
  :root[data-theme] .tt-card{ display:grid; grid-template-columns:44px minmax(0, 1fr); column-gap:var(--e-3); min-height:44px; padding:var(--e-2) 0; background:none; }
  :root[data-theme] .tt-card .tt-h{ grid-column:1; grid-row:1; padding-top:1px; }
  :root[data-theme] .tt-card .tt-ti, :root[data-theme] .tt-card .tt-me{ grid-column:2; }
  :root[data-theme] .tt-card.tt-e{ margin:var(--e-1) 0; padding:var(--e-2) var(--e-2); }
}