/* mi-dia.css — agenda de Google Calendar (vistas Hoy y Semana). La comparten
   el home (Mi día del usuario) y Mi día CS (calendario de cada CSM); la pinta
   js/lib/mi-dia.js. Solo tokens globales de style.css: los alias del home
   (--card, --hint, --surface-2, --text redefinido) no se usan aquí. */
/* ── Mi día (agenda de hoy del implementador) ────────────────── */
.mi-dia {
    background: var(--surface-base);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 16px 16px;
    margin: 8px 0 28px;
}
.mi-dia-header {
    display:flex; align-items:baseline; justify-content:space-between;
    gap:12px; flex-wrap:wrap; margin-bottom: 12px;
}
.mi-dia-header h2 {
    font-size:13px; font-weight:800;
    letter-spacing:.06em; text-transform:uppercase;
    color:var(--text-muted);
    display:flex; align-items:center; gap:7px;
}
.mi-dia-header h2 .sec-ic { flex:none; color:var(--primary); }
/* Solo la primera letra: `capitalize` ponía «29 De Septiembre», y en español
   «de» y el mes van en minúscula. */
.mi-dia-header p { font-size:11px; color:var(--text-muted); }
.mi-dia-header p::first-letter { text-transform:uppercase; }
.mi-dia-header p.is-rango { text-transform:none; }
.mid-head-der { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* Selector segmentado (Hoy/Semana del calendario y Semana/Día de la agenda
   de Mi día CS): un solo patrón para los dos. 32px de alto: el objetivo
   táctil se quedaba en 23px. */
.mid-vista {
    display:inline-flex; padding:2px; gap:2px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
}
.mid-vista button {
    border:0; background:transparent; cursor:pointer;
    font-family:inherit; font-size:12px; font-weight:700;
    color: var(--text-muted);
    min-height:32px; padding:4px 12px; border-radius: var(--radius-sm);
}
.mid-vista button:hover { color: var(--text-emphasis); }
.mid-vista button[aria-pressed="true"] {
    background: var(--surface-base); color: var(--text-emphasis);
    box-shadow: 0 0 0 1px var(--border);
}
.mid-vista button:focus-visible { outline:2px solid var(--primary); outline-offset:1px; }
/* Vista semanal: columnas lun-vie con las reuniones en orden de hora */
.mid-cal {
    display:grid; grid-template-columns: repeat(5, minmax(0,1fr));
    border: 1px solid var(--border); border-radius: var(--radius-md); overflow:hidden;
}
.mid-cal-dia { min-width:0; padding: 10px 8px 12px; border-right:1px solid var(--border); }
.mid-cal-dia:last-child { border-right:0; }
.mid-cal-head {
    display:flex; flex-direction:column; align-items:flex-start; gap:4px;
    margin: 0 2px 10px;
    font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    color: var(--text-muted);
}
.mid-cal-head b {
    font-size:18px; font-weight:700; letter-spacing:0; color:var(--text-emphasis);
    font-variant-numeric: tabular-nums;
    min-width:34px; height:34px; padding:0 6px; border-radius: var(--radius-sm);
    display:inline-flex; align-items:center; justify-content:center; margin-left:-6px;
}
.mid-cal-dia.is-hoy .mid-cal-head { color: var(--primary); }
.mid-cal-dia.is-hoy .mid-cal-head b { background: var(--primary-fill); color: var(--primary-on-fill); margin-left:0; }
.mid-cal-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.mid-cal-ev {
    display:flex; flex-direction:column; gap:2px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 9px;
    min-width:0;
}
.mid-cal-ev.is-now { border-color: var(--primary); background: var(--primary-tint); }
/* Pasada: tarjeta hundida (fondo de la columna, borde discontinuo) y título
   en gris secundario. Nada de opacity: bajaba el texto a 2,2:1; así la hora
   (--text-muted) sigue ≥5:1 en claro y oscuro. */
.mid-cal-ev.is-pasado { background: var(--surface-base); border-style: dashed; }
.mid-cal-ev.is-pasado .mid-cal-t { color: var(--text-secondary); font-weight:600; }
.mid-cal-h {
    font-size:11px; font-weight:700; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.mid-cal-ev.is-now .mid-cal-h { color: var(--primary); }
.mid-cal-t, .mid-cal-sub {
    overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; overflow-wrap:anywhere;
}
.mid-cal-t { font-size:13px; font-weight:700; color:var(--text-emphasis); line-height:1.25; -webkit-line-clamp:2; }
.mid-cal-sub { font-size:12px; color:var(--text-muted); line-height:1.25; -webkit-line-clamp:1; }
.mid-cal-vacio { margin:0 2px; font-size:12px; color:var(--text-muted); }
@media (max-width:640px){
    /* Hoy/Semana con el dedo: con el marco del grupo, 46 px de alto. */
    .mid-vista button { min-height:40px; }
}
@media (max-width:720px){
    /* En estrecho no caben cinco columnas: los días se apilan. */
    .mid-cal { grid-template-columns: minmax(0,1fr); }
    .mid-cal-dia { border-right:0; border-bottom:1px solid var(--border); }
    .mid-cal-dia:last-child { border-bottom:0; }
    .mid-cal-head { flex-direction:row; align-items:center; gap:8px; }
}
/* Vista cronológica del día laboral (09-18): ocupado vs libre */
.mi-dia-tl { margin: 0 0 14px; }
.mid-tl-track {
    position: relative; height: 44px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.mid-tl-grid { position:absolute; inset:0; display:flex; pointer-events:none; }
.mid-tl-cell { flex:1 1 0; border-right:1px dashed var(--border); }
.mid-tl-cell:last-child { border-right:0; }
/* El bloque solo lleva la hora: el título no cabe en franjas cortas y
   se cortaba a media palabra. El nombre completo sale en el pie al
   pasar el ratón o tocarlo (y en el title nativo); teclado y lector
   tienen la lista «Ver las franjas» debajo. cursor:pointer también
   hace que iOS emita el mouseover al tocar. */
.mid-tl-block {
    position:absolute; z-index:2;
    display:flex; align-items:center;
    box-sizing:border-box;
    border:0; border-radius: var(--radius-sm); padding:0 5px;
    font-family:inherit; font-size:11px; font-weight:700; line-height:1;
    font-variant-numeric: tabular-nums;
    white-space:nowrap; overflow:hidden;
    text-align:left; cursor:pointer;
    /* Ocupado = azul de dato, no coral (el coral es de acciones y del
       «ahora»). Par tono azul: la hora cumple AA en los dos temas y el
       filete marca el borde contra la pista. */
    background: var(--tone-blue-bg); color: var(--tone-blue-fg);
    box-shadow: inset 0 0 0 1px var(--tone-blue-fg);
}
/* Bloqueo propio (sin invitados): hueco reservado, no reunión. Fondo de
   tarjeta y borde discontinuo para distinguirlo sin otro color. */
.mid-tl-block.is-bloqueo {
    background: var(--surface-base); color: var(--text-secondary);
    box-shadow:none; border:1px dashed var(--text-muted);
}
/* Ya terminado (reunión o bloqueo): gris neutro con filete en vez de
   opacity, que dejaba la hora en 1,4:1. --text-muted sobre --surface-hover
   da 4,99:1 en claro y 4,90:1 en oscuro; el filete del mismo token marca el
   borde del bloque (≥3:1 contra la pista) aunque sea mini y sin hora. */
.mid-tl-block.is-pasado {
    background: var(--surface-hover); color: var(--text-muted);
    box-shadow: inset 0 0 0 1px var(--text-muted); border:0;
}
.mid-tl-block.is-mini { padding:0; font-size:0; }
.mid-tl-block:hover {
    outline:2px solid var(--text-emphasis); outline-offset:-2px; z-index:4;
}
.mid-tl-now {
    position:absolute; top:0; bottom:0; width:2px; z-index:3;
    background: var(--danger); pointer-events:none;
}
.mid-tl-now::before {
    content:''; position:absolute; top:0; left:-3px;
    width:8px; height:8px; border-radius:50%; background: var(--danger);
}
.mid-tl-axis {
    display:flex; margin-top:4px;
    font-size:11px; font-weight:700; color:var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.mid-tl-axis span { flex:1 1 0; text-align:left; }
.mid-tl-axis span:last-child { flex:0 0 auto; }
.mid-tl-foot { font-size:11px; color:var(--text-muted); margin-top:5px; min-height:15px; }
.mid-tl-foot strong { color: var(--text-emphasis); font-weight:700; }
.mid-tl-det { color: var(--text-emphasis); font-weight:700; }
.mid-tl-det b { font-weight:800; font-variant-numeric: tabular-nums; }
/* Lista de franjas (plegada): la alternativa accesible a la barra y la
   forma de leerla en móvil, donde los bloques miden pocos píxeles. */
.mid-tl-mas { margin-top:4px; font-size:12px; color:var(--text-muted); }
/* list-item conserva el triángulo nativo de <details>; 16px de línea +
   4px arriba y abajo = 24px de objetivo táctil. */
.mid-tl-mas summary {
    display:list-item; padding:4px 0; line-height:16px;
    cursor:pointer; font-weight:700; color:var(--text-secondary);
    border-radius: var(--radius-sm);
}
.mid-tl-mas summary:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.mid-tl-mas ul { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:3px; }
.mid-tl-mas b { color: var(--text-emphasis); font-variant-numeric: tabular-nums; }
@media (max-width:520px){
    /* En móvil no cabe ni la hora: la barra queda como franjas de
       ocupación y el detalle se lee en «Ver las franjas» (o tocando un
       bloque, si se acierta). */
    .mid-tl-block { padding:0; font-size:0; }
}
.mi-dia-list { display:flex; flex-direction:column; gap:8px; }
.mid-row {
    display:flex; align-items:center; gap:12px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
}
/* La sesión en curso se marca con borde y fondo tintado, no con una
   franja lateral: la hora de la izquierda ya dice "Ahora". */
.mid-row.is-now {
    border-color: var(--primary);
    background: var(--primary-tint);
}
.mid-time {
    flex:0 0 auto; min-width: 96px;
    font-size:13px; font-weight:800;
    font-variant-numeric: tabular-nums;
    color: var(--text-emphasis); line-height:1.2;
}
.mid-time small {
    display:block; font-size:11px; font-weight:700;
    letter-spacing:.04em; text-transform:uppercase;
    color: var(--primary); margin-top:2px;
}
.mid-body { flex:1 1 auto; min-width:0; }
.mid-cliente {
    font-size:14px; font-weight:700; color:var(--text-emphasis);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mid-tarea {
    font-size:12px; color:var(--text-muted); margin-top:1px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mid-join {
    flex:0 0 auto;
    display:inline-flex; align-items:center; gap:6px;
    background: var(--primary-fill); color: var(--primary-on-fill);
    border:none; border-radius: var(--radius-control);
    padding:8px 14px; font-size:13px; font-weight:700;
    text-decoration:none; cursor:pointer;
    transition: background .15s;
}
.mid-join:hover { background: var(--primary-dark); }
.mi-dia-empty { font-size:13px; color:var(--text-muted); padding:6px 2px; }
.mi-dia-loading { font-size:12px; color:var(--text-muted); padding:6px 2px; }
.mi-dia-cta {
    background: var(--surface-muted);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}
.mid-cta-lead { font-size:13px; color:var(--text-emphasis); font-weight:600; margin-bottom:8px; }
.mid-cta-steps {
    margin: 0 0 12px; padding-left: 20px;
    font-size:13px; color:var(--text-muted); line-height:1.5;
}
.mid-cta-steps li { margin: 3px 0; }
.mid-cta-steps strong { color: var(--text-emphasis); }
@media (max-width:520px){
    .mid-row { flex-wrap:wrap; }
    .mid-join { width:100%; justify-content:center; }
}