/* ============================================================
   WTF PUBLICIDAD — Panel Interno
   tu-dia.css — Tarjeta "Tu día" del Inicio, su ventana de tarea propia,
   "Pendientes del equipo" y la pestaña de Equipo del correo.
   Usa las variables del panel (shell.css): claro y oscuro salen solos.
   El verde es acento: botón principal (texto negro) y foco.
   ============================================================ */

.td-card { margin-bottom: .75rem; padding: 1rem 1.1rem; }
.td-card[aria-busy="true"] .td-cuerpo { min-height: 60px; }
.td-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.td-cab-txt { min-width: 0; }
.td-titulo { font-size: 15px; font-weight: 700; color: var(--t); line-height: 1.3; margin: 0; }
.td-titulo-fecha { font-weight: 500; color: var(--ts); }
.td-resumen { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.td-chip {
  display: inline-flex; align-items: center; gap: .3rem; font-size: 11px; font-weight: 700;
  padding: 2px 9px; border-radius: 20px; border: 1px solid var(--br); background: var(--c2); color: var(--ts);
}
.td-chip.rojo  { background: var(--red-bg);    border-color: var(--red-br);    color: #C2413F; }
.td-chip.ambar { background: var(--yellow-bg); border-color: var(--yellow-br); color: #9A5B00; }
.td-chip.verde { background: var(--green-bg);  border-color: var(--green-br);  color: var(--go); }
[data-theme="dark"] .td-chip.rojo  { color: #F07D7C; }
[data-theme="dark"] .td-chip.ambar { color: #EF9F27; }
[data-theme="dark"] .td-chip.verde { color: var(--g); }

/* ── Contraer y desplegar (flecha del encabezado) ── */
.td-cab-acciones { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; margin-left: auto; }
.td-plegar {
  width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--br); border-radius: var(--r); color: var(--ts); cursor: pointer; padding: 0;
}
.td-plegar:hover { border-color: var(--brh); color: var(--t); }
.td-plegar:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; }
.td-plegar .ti { font-size: 16px; transition: transform .22s ease; transform: rotate(180deg); }
.td-plegar[aria-expanded="false"] .ti { transform: none; }
.td-agregar-rapido { min-height: 32px; padding: 5px 10px; }
.td-agregar-rapido[hidden] { display: none !important; }
.td-anima { overflow: hidden; transition: max-height .22s ease, opacity .22s ease; }
/* Contraída: título y conteos en una sola línea */
.td-card.td-plegada .td-cab { flex-wrap: nowrap; align-items: center; }
.td-card.td-plegada .td-cab-txt { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .5rem; flex: 1; }
.td-card.td-plegada .td-resumen { margin-top: 0; }
.td-card:not(.td-plegada) .td-cab-acciones { align-self: flex-start; }
/* Pendientes del equipo: resumen y flecha a la derecha del título */
.tde-cab-der { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; }
.td-equipo.td-plegada .dcard-title { margin-bottom: 0; }

.td-cargando { display: flex; align-items: center; gap: .45rem; padding: .85rem 0; font-size: 12px; color: var(--ts); }
.td-gira { animation: td-gira 1s linear infinite; font-size: 15px; }
@keyframes td-gira { to { transform: rotate(360deg); } }
.td-error { padding: .75rem 0; font-size: 12px; color: var(--ts); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.td-aviso-fuentes { font-size: 11px; color: var(--ts); margin-top: .5rem; display: flex; gap: .35rem; align-items: flex-start; }

/* ── Agregar rápido ── */
.td-agregar { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: .8rem 0 .2rem; }
.td-agregar .td-nuevo { flex: 1 1 220px; min-width: 0; }
.td-input, .td-select {
  padding: 7px 10px; border: 1px solid var(--brh); border-radius: var(--r); background: var(--c1); color: var(--t);
  font-size: 12px; font-family: var(--font); outline: none; min-height: 34px;
}
.td-input::placeholder { color: var(--ts); }
.td-input:focus, .td-select:focus { border-color: var(--g); box-shadow: 0 0 0 3px rgba(117,184,42,.15); }
.td-select { cursor: pointer; }
.td-agregar .td-fecha { width: 150px; }
.td-agregar .td-hora { width: 110px; }
.td-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 34px;
  padding: 7px 14px; border-radius: var(--r); font-size: 12px; font-weight: 700; font-family: var(--font);
  cursor: pointer; border: 1px solid var(--br); background: var(--c2); color: var(--t); white-space: nowrap;
}
.td-btn:hover { border-color: var(--brh); }
.td-btn.prim { background: var(--g); border-color: var(--g); color: #000; }
.td-btn.prim:hover { background: var(--gd); border-color: var(--gd); }
.td-btn.peligro { background: transparent; color: #C2413F; border-color: var(--red-br); }
[data-theme="dark"] .td-btn.peligro { color: #F07D7C; }
.td-btn.peligro:hover { background: var(--red-bg); }
.td-btn:disabled { opacity: .55; cursor: default; }
.td-btn[hidden], .td-der[hidden] { display: none !important; }
.td-btn:focus-visible, .td-ir:focus-visible, .td-check:focus-visible, .td-editar:focus-visible,
.td-grupo-cab:focus-visible, .td-mas:focus-visible, .tde-persona-cab:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; }

/* ── Grupos ── */
.td-grupos { margin-top: .5rem; }
.td-grupo { border-top: 1px solid var(--br); padding: .55rem 0 .15rem; }
.td-grupo:first-child { border-top: none; }
.td-grupo-cab {
  display: flex; align-items: center; gap: .45rem; width: 100%; background: none; border: none; padding: .15rem 0;
  font-family: var(--font); text-align: left; color: var(--t); cursor: default;
}
button.td-grupo-cab { cursor: pointer; }
.td-grupo-punto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--ts); }
.td-g-atrasado .td-grupo-punto { background: #E24B4A; }
.td-g-hoy .td-grupo-punto { background: #EF9F27; }
.td-grupo-tit { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ts); }
.td-g-atrasado .td-grupo-tit { color: #C2413F; }
.td-g-hoy .td-grupo-tit { color: #9A5B00; }
[data-theme="dark"] .td-g-atrasado .td-grupo-tit { color: #F07D7C; }
[data-theme="dark"] .td-g-hoy .td-grupo-tit { color: #EF9F27; }
.td-grupo-n { font-size: 11px; font-weight: 700; color: var(--ts); }
.td-grupo-ver { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--ts); display: inline-flex; align-items: center; gap: .2rem; }
.td-grupo-ver .ti { font-size: 13px; transition: transform .2s; }
.td-grupo-cab[aria-expanded="true"] .td-grupo-ver .ti { transform: rotate(180deg); }

.td-lista { list-style: none; margin: 0; padding: 0; }
.td-item {
  display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--sep);
  font-size: 12px; min-width: 0; transition: opacity .25s ease, transform .25s ease;
}
.td-lista .td-item:last-child { border-bottom: none; }
.td-g-atrasado .td-item { box-shadow: inset 3px 0 0 #E24B4A; padding-left: .6rem; }
.td-g-hoy .td-item { box-shadow: inset 3px 0 0 #EF9F27; padding-left: .6rem; }
.td-ico {
  width: 28px; height: 28px; border-radius: var(--r); background: var(--c2); color: var(--ts);
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0;
}
.td-check {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; cursor: pointer; background: transparent;
  border: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--ts);
}
.td-check .td-caja {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--brs); display: inline-flex;
  align-items: center; justify-content: center; transition: background .15s, border-color .15s;
}
.td-check:hover .td-caja { border-color: var(--g); }
.td-check .ti { font-size: 12px; color: #000; opacity: 0; }
.td-hecha .td-check .td-caja { background: var(--g); border-color: var(--g); }
.td-hecha .td-check .ti { opacity: 1; }
.td-item-txt { flex: 1; min-width: 0; }
.td-item-tit { color: var(--t); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.td-item-det { color: var(--ts); font-size: 11px; margin-top: .1rem; overflow-wrap: anywhere; }
.td-item-nota { color: var(--ts); font-size: 11px; margin-top: .15rem; display: flex; gap: .25rem; align-items: flex-start; }
.td-item-nota .ti { font-size: 12px; margin-top: 1px; }
.td-hecha .td-item-tit { text-decoration: line-through; color: var(--ts); font-weight: 500; }
.td-item-der { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; flex-shrink: 0; text-align: right; }
.td-cuando { font-size: 11px; color: var(--ts); white-space: nowrap; }
.td-g-atrasado .td-cuando { color: #C2413F; font-weight: 700; }
.td-g-hoy .td-cuando { color: #9A5B00; font-weight: 700; }
[data-theme="dark"] .td-g-atrasado .td-cuando { color: #F07D7C; }
[data-theme="dark"] .td-g-hoy .td-cuando { color: #EF9F27; }
.td-monto { font-size: 12px; font-weight: 700; color: var(--t); white-space: nowrap; }
/* Junto al monto: «estimado» (fijos por confirmar de Finanzas) */
.td-monto-nota { font-size: 10px; font-weight: 700; white-space: nowrap; padding: 0 6px; border-radius: 20px;
  border: 1px dashed rgba(239,159,39,.6); background: var(--yellow-bg); color: #9A5B00; }
[data-theme="dark"] .td-monto-nota { color: #EF9F27; }
.td-ir, .td-editar {
  display: inline-flex; align-items: center; gap: .25rem; flex-shrink: 0; background: transparent; cursor: pointer;
  border: 1px solid var(--br); border-radius: var(--r); color: var(--t); font-size: 11px; font-weight: 600;
  font-family: var(--font); padding: 5px 9px; min-height: 30px; white-space: nowrap;
}
.td-ir:hover, .td-editar:hover { border-color: var(--g); }
.td-ir .ti { font-size: 12px; }
.td-editar { padding: 5px 7px; color: var(--ts); }
.td-editar .ti { font-size: 14px; }
.td-mas {
  background: none; border: none; cursor: pointer; font-family: var(--font); font-size: 11px; font-weight: 600;
  color: var(--ts); padding: .35rem 0; display: inline-flex; align-items: center; gap: .25rem;
}
.td-mas:hover { color: var(--t); }
.td-saliendo { opacity: 0; transform: translateX(8px); }

.td-vacio { display: flex; align-items: center; gap: .7rem; padding: .9rem 0 .4rem; }
.td-vacio-ico {
  width: 38px; height: 38px; border-radius: 50%; background: var(--green-bg); color: var(--go);
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
[data-theme="dark"] .td-vacio-ico { color: var(--g); }
.td-vacio-tit { font-size: 13px; font-weight: 700; color: var(--t); }
.td-vacio-sub { font-size: 11px; color: var(--ts); margin-top: .1rem; line-height: 1.5; }

/* ── Ayuda (?) ── */
.td-ayuda {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 50%; border: 1px solid var(--brh); color: var(--ts); font-size: 10px; font-weight: 700; cursor: help;
  background: var(--c1); vertical-align: 1px; margin-left: .25rem;
}
.td-ayuda:hover::after, .td-ayuda:focus::after {
  content: attr(data-ayuda); position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%);
  width: max-content; max-width: 260px; background: var(--c1); color: var(--t); border: 1px solid var(--br);
  box-shadow: var(--shadow-card); border-radius: var(--r); padding: .45rem .6rem; font-size: 11px; font-weight: 500;
  line-height: 1.45; z-index: 30; text-transform: none; letter-spacing: 0; white-space: normal;
}

/* ── Ventana de la tarea propia ── */
.td-modal { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0,0,0,.55); }
.td-modal[hidden] { display: none; }
.td-modal-caja {
  width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto; background: var(--c1); color: var(--t);
  border: 1px solid var(--br); border-radius: var(--r2); box-shadow: 0 20px 60px rgba(0,0,0,.35);
  animation: td-entra .18s ease-out;
}
@keyframes td-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.td-modal-cab { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--br); }
.td-modal-tit { font-size: 13px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .4rem; }
.td-modal-cerrar { background: none; border: none; color: var(--ts); cursor: pointer; font-size: 18px; width: 32px; height: 32px; border-radius: var(--r); }
.td-modal-cerrar:hover { background: var(--c2); color: var(--t); }
.td-modal-cuerpo { padding: .9rem 1rem; display: flex; flex-direction: column; gap: .65rem; }
.td-campo label { display: block; font-size: 11px; font-weight: 600; color: var(--t); margin-bottom: .25rem; }
.td-campo .td-input { width: 100%; }
.td-campo textarea.td-input { min-height: 70px; resize: vertical; }
.td-campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.td-modal-err { font-size: 11px; color: #C2413F; min-height: 1em; }
[data-theme="dark"] .td-modal-err { color: #F07D7C; }
.td-modal-pie { display: flex; align-items: center; gap: .4rem; padding: .7rem 1rem; border-top: 1px solid var(--br); flex-wrap: wrap; }
.td-modal-pie .td-der { margin-left: auto; display: flex; gap: .4rem; }
.td-confirmar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: 12px; width: 100%; }
.td-confirmar[hidden] { display: none; }

/* ── Pendientes del equipo ── */
.td-equipo { margin: .75rem 0; }
.td-equipo-resumen { font-size: 11px; font-weight: 500; color: var(--ts); text-align: right; }
.tde-persona { border-bottom: 1px solid var(--br); }
.tde-persona:last-child { border-bottom: none; }
.tde-persona-cab {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem 0; background: none; border: none;
  font-family: var(--font); text-align: left; color: var(--t); cursor: pointer;
}
.tde-persona-cab[disabled] { cursor: default; }
.tde-av {
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0; background: var(--c2); color: var(--ts); border: 1px solid var(--br);
}
.tde-quien { flex: 1; min-width: 0; }
.tde-nombre { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tde-rol { font-size: 11px; color: var(--ts); }
.tde-cifras { display: flex; gap: .3rem; flex-shrink: 0; align-items: center; }
.tde-chev { font-size: 14px; color: var(--ts); transition: transform .2s; }
.tde-persona-cab[aria-expanded="true"] .tde-chev { transform: rotate(180deg); }
.tde-detalle { padding: 0 0 .5rem 2.5rem; }
.tde-detalle[hidden] { display: none; }
.tde-sub { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ts); margin: .35rem 0 .1rem; }
.tde-detalle .td-item { padding: .35rem 0; }
.tde-detalle .td-ico { width: 24px; height: 24px; font-size: 13px; }

/* ── Equipo → Correo «Tu día» ── */
.tdc-caja { background: var(--c1); border: 1px solid var(--br); border-radius: var(--r2); box-shadow: var(--shadow-card); padding: .75rem 1rem; margin-bottom: .65rem; }
.tdc-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--sep); }
.tdc-fila:last-child { border-bottom: none; }
.tdc-nombre { font-size: 12px; font-weight: 600; color: var(--t); }
.tdc-sub { font-size: 11px; color: var(--ts); margin-top: .1rem; }

/* ── Celular ── */
@media (max-width: 560px) {
  .td-card { padding: .85rem .8rem; }
  .td-item { flex-wrap: wrap; row-gap: .3rem; }
  .td-item-txt { flex: 1 1 calc(100% - 44px); }
  .td-item-der { flex-direction: row; align-items: center; gap: .5rem; margin-left: 36px; }
  .td-ir, .td-editar { margin-left: auto; }
  .td-agregar .td-nuevo { flex-basis: 100%; }
  .td-agregar .td-select, .td-agregar .td-fecha, .td-agregar .td-hora { flex: 1 1 30%; width: auto; min-width: 0; }
  .td-agregar .td-btn { flex: 1 1 100%; }
  .td-campos-2 { grid-template-columns: 1fr; }
  .tde-detalle { padding-left: 0; }
  .td-agregar-rapido { padding: 5px 8px; }
  .td-agregar-rapido-txt { display: none; }
  .td-card.td-plegada .td-titulo { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .td-item, .td-grupo-ver .ti, .tde-chev, .td-check .td-caja, .td-plegar .ti, .td-anima { transition: none; }
  .td-modal-caja { animation: none; }
  .td-gira { animation: none; }
  .td-saliendo { transform: none; }
}