/* =========================================================================
   TODAS LAS TAREAS — vista de tarjetas
   Cada tarea es una tarjeta con todos sus campos a la vista y con su nombre
   escrito encima (ya no hay que desplazarse a la derecha para ver
   comentarios o hitos). Las celdas siguen siendo las mismas <td> de la tabla,
   así que la edición en línea, los permisos, el tiempo real, los sub-items y
   el control de calidad funcionan exactamente igual.
   Solo se activa con la clase .notion-table--cards (selector Tarjetas/Tabla).
   ========================================================================= */

/* ─── Selector Tarjetas / Tabla (barra de herramientas) ─────────────────── */
.task-layout-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 6px;
  padding: 3px;
  border: 1px solid rgba(7, 90, 98, 0.12);
  border-radius: 12px;
  background: rgba(234, 248, 248, 0.72);
}

.task-layout-switch[hidden] { display: none; }

.task-layout-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #657d80;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}

.task-layout-switch__btn:hover { color: var(--moa-deep, #0a6f78); }

.task-layout-switch__btn.is-active {
  background: #fff;
  color: var(--moa-deep, #0a6f78);
  box-shadow: 0 2px 8px rgba(7, 90, 98, 0.12);
}

.task-layout-switch__btn:focus-visible {
  outline: 2px solid var(--moa-aqua, #21a9b3);
  outline-offset: 1px;
}

/* ─── Contenedor ─────────────────────────────────────────────────────────── */
#view-all-tasks .table-wrapper.table-wrapper--cards {
  overflow: visible;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

#main-table.notion-table--cards {
  display: block;
  width: 100%;
  min-width: 0 !important;
  border: 0;
  font-size: 13px;
}

#main-table.notion-table--cards > thead,
#main-table.notion-table--cards > tbody {
  display: block;
  width: 100%;
}

/* ─── Barra "Ordenar por" (antes: encabezados de columna) ────────────────── */
#main-table.notion-table--cards > thead > tr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0 2px;
}

#main-table.notion-table--cards > thead > tr::before {
  content: "Ordenar por";
  margin-right: 4px;
  color: var(--moa-muted, #6b8184);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#main-table.notion-table--cards > thead th {
  position: static;
  display: inline-flex;
  height: auto;
  padding: 4px 10px;
  border: 1px solid rgba(7, 90, 98, 0.10);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #587276;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: none;
  cursor: pointer;
}

#main-table.notion-table--cards > thead th:hover,
#main-table.notion-table--cards > thead th:focus-visible {
  border-color: rgba(7, 90, 98, 0.22);
  background: #e6f7f8;
  color: var(--moa-deep, #0a6f78);
  outline: none;
}

#main-table.notion-table--cards > thead th.th--sorted {
  border-color: rgba(7, 90, 98, 0.30);
  background: #d6f1f3;
  color: var(--moa-deeper, #075a62);
}

#main-table.notion-table--cards > thead th .th-icon { display: none; }

/* ─── La tarjeta ─────────────────────────────────────────────────────────── */
#main-table.notion-table--cards > tbody > tr {
  display: block;
  border: 0;
}

#main-table.notion-table--cards > tbody > tr.task-parent-row,
#main-table.notion-table--cards > tbody > tr.subitem-row {
  display: grid;
  /* Las 2 primeras columnas se ajustan a su contenido para que tipo, vertical
     y calidad queden juntos en una línea. Las 2 de la derecha tienen ancho
     fijo para que estado, fechas y comentarios queden alineados en todas. */
  grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 1fr) 22% 22%;
  grid-template-areas:
    "title    title    title    title    estado   dates"
    "tipo     vertical calidad  calidad  people   people"
    "brief    brief    brief    brief    comments comments"
    "hito1    hito2    hito3    hito4    comments comments";
  column-gap: 6px;
  row-gap: 0;
  margin: 0 0 10px;
  padding: 8px 10px 8px;
  border: 1px solid rgba(7, 90, 98, 0.11);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 30px rgba(7, 75, 81, 0.07);
  transition: border-color .15s ease, box-shadow .15s ease;
}

#main-table.notion-table--cards > tbody > tr.task-parent-row:hover,
#main-table.notion-table--cards > tbody > tr.subitem-row:hover {
  border-color: rgba(7, 90, 98, 0.22);
  background: #fff;
  box-shadow: 0 14px 36px rgba(7, 75, 81, 0.11);
}

/* Celdas: sin aspecto de tabla */
#main-table.notion-table--cards > tbody > tr > td,
#main-table.notion-table--cards > tbody > tr:hover > td,
#main-table.notion-table--cards > tbody > tr > td:first-child,
#main-table.notion-table--cards > tbody > tr:hover > td:first-child {
  position: relative;
  left: auto;
  display: block;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto;
  min-height: 0;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  background-image: none;
  box-shadow: none;
  vertical-align: top;
}

/* Etiqueta de cada campo, encima de su valor */
#main-table.notion-table--cards > tbody > tr > td[data-label]::before {
  content: attr(data-label);
  display: block;
  margin-bottom: 4px;
  color: #7c9396;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Campos que se pueden editar: se nota al pasar el ratón */
#main-table.notion-table--cards > tbody > tr > td.editable-cell { cursor: pointer; }

#main-table.notion-table--cards > tbody > tr > td.editable-cell:hover {
  border-color: rgba(7, 90, 98, 0.14);
  background: rgba(230, 247, 248, 0.80) !important;
}

#main-table.notion-table--cards > tbody > tr > td.editable-cell[data-label]:hover::before {
  content: attr(data-label) "  ·  editar";
  color: var(--moa-deep, #0a6f78);
}

#main-table.notion-table--cards > tbody > tr > td.locked-date-cell:hover {
  background: #fff7e6 !important;
}

#main-table.notion-table--cards > tbody > tr > td.locked-date-cell[data-label]:hover::before {
  content: attr(data-label) "  ·  pedir cambio";
  color: #a86a00;
}

/* Campo en edición: por encima del resto de la tarjeta */
#main-table.notion-table--cards > tbody > tr > td.editing {
  z-index: 30;
  border-color: rgba(7, 90, 98, 0.26);
  background: #fff !important;
  box-shadow: 0 18px 50px rgba(7, 75, 81, 0.18);
}

#main-table.notion-table--cards td.editing .inline-editor,
#main-table.notion-table--cards td.editing .inline-editor--quick-select,
#main-table.notion-table--cards td.editing .inline-editor--multi .multi-options {
  width: 100%;
  min-width: 0;
  max-width: none;
}

#main-table.notion-table--cards td.editing .inline-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#main-table.notion-table--cards td.editing .inline-actions { flex-wrap: wrap; }

/* Valor vacío: "Agregar" si puedes editarlo, guion si no */
#main-table.notion-table--cards .cell-empty {
  display: block;
  min-width: 0;
  min-height: 0;
}

#main-table.notion-table--cards .cell-empty::after,
#main-table.notion-table--cards .editable-cell:hover .cell-empty::after {
  content: "—";
  color: #a8babc;
  font-size: 12px;
  font-weight: 600;
}

#main-table.notion-table--cards .editable-cell .cell-empty::after,
#main-table.notion-table--cards .editable-cell:hover .cell-empty::after {
  content: "＋ Agregar";
  color: #8fb3b6;
}

#main-table.notion-table--cards .editable-cell:hover .cell-empty::after { color: var(--moa-deep, #0a6f78); }

#main-table.notion-table--cards td.locked-date-cell .cell-empty::after { content: "—"; }

/* Tipo, vertical y calidad se leen solos (son etiquetas de color):
   van en una línea bajo el título, sin nombre de campo encima. */
#main-table.notion-table--cards > tbody > tr > td[data-key="Tipo de trabajo"]::before,
#main-table.notion-table--cards > tbody > tr > td[data-key="Vertical"]::before,
#main-table.notion-table--cards > tbody > tr > td[data-key="Calidad"]::before {
  display: none;
}

#main-table.notion-table--cards td[data-key="Tipo de trabajo"].editable-cell .cell-empty::after { content: "＋ Tipo"; }
#main-table.notion-table--cards td[data-key="Vertical"].editable-cell .cell-empty::after { content: "＋ Vertical"; }
#main-table.notion-table--cards td[data-key="Calidad"].editable-cell .cell-empty::after { content: "＋ Calidad"; }
#main-table.notion-table--cards td[data-key="Calidad"]:not(.editable-cell) .cell-empty::after { content: "Sin revisión de calidad"; font-weight: 600; }

/* Hitos: solo los que tienen fecha y el siguiente para agregar.
   Si no puedes editarlos y están vacíos, no se muestran. */
#main-table.notion-table--cards > tbody > tr > td.card-hidden-cell,
#main-table.notion-table--cards > tbody > tr > td[data-key^="Deadline "]:not(.editable-cell):has(> .cell-empty) {
  display: none;
}

/* ─── Ubicación de cada campo dentro de la tarjeta ───────────────────────── */
#main-table.notion-table--cards td[data-key="TASKS"]                 { grid-area: title; }
#main-table.notion-table--cards td[data-key="Estado"]                { grid-area: estado; }
#main-table.notion-table--cards td[data-key="Fecha de Inicio y Fin"] { grid-area: dates; }
#main-table.notion-table--cards td[data-key="Tipo de trabajo"]       { grid-area: tipo; }
#main-table.notion-table--cards td[data-key="Vertical"]              { grid-area: vertical; }
#main-table.notion-table--cards td[data-key="Calidad"]               { grid-area: calidad; }
#main-table.notion-table--cards td[data-key="Specialists"]           { grid-area: people; }
#main-table.notion-table--cards td[data-key="Brief Description"]     { grid-area: brief; }
#main-table.notion-table--cards td[data-key="Comments"]              { grid-area: comments; }
#main-table.notion-table--cards td[data-key="Deadline 1"]            { grid-area: hito1; }
#main-table.notion-table--cards td[data-key="Deadline 2"]            { grid-area: hito2; }
#main-table.notion-table--cards td[data-key="Deadline 3"]            { grid-area: hito3; }
#main-table.notion-table--cards td[data-key="Deadline 4"]            { grid-area: hito4; }

/* ─── Título ─────────────────────────────────────────────────────────────── */
#main-table.notion-table--cards td[data-key="TASKS"] {
  align-self: center;
  padding-top: 6px;
  padding-bottom: 4px;
}

#main-table.notion-table--cards td[data-key="Tipo de trabajo"],
#main-table.notion-table--cards td[data-key="Vertical"],
#main-table.notion-table--cards td[data-key="Calidad"] {
  align-self: start;
}

#main-table.notion-table--cards .task-title-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: none;
}

#main-table.notion-table--cards .task-title {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  color: #12363b;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.15px;
  line-height: 1.3;
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

#main-table.notion-table--cards .task-open-detail {
  margin-left: 0;
  padding: 4px 12px;
  border-color: rgba(7, 90, 98, 0.18);
  background: #e6f7f8;
  color: var(--moa-deeper, #075a62);
  font-size: 12px;
  opacity: 1;
}

#main-table.notion-table--cards .task-open-detail:hover {
  background: #d3f0f2;
}

#main-table.notion-table--cards .subitem-toggle {
  flex-shrink: 0;
}

/* ─── Valores ────────────────────────────────────────────────────────────── */
#main-table.notion-table--cards .badges-col {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
}

#main-table.notion-table--cards .badge + .badge { margin-top: 0; }

#main-table.notion-table--cards .badge,
#main-table.notion-table--cards .status-pill {
  white-space: normal;
  max-width: 100%;
}

#main-table.notion-table--cards .specialists-col {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
}

#main-table.notion-table--cards .avatar-chip { max-width: 100%; }

#main-table.notion-table--cards .date-range--window {
  flex-wrap: wrap;
  white-space: normal;
  row-gap: 2px;
}

/* Brief y comentarios: texto completo, recortado a unas líneas
   (el texto entero se ve al pasar el ratón, al editar o en la Ficha). */
#main-table.notion-table--cards td[data-key="Brief Description"] .text-truncate,
#main-table.notion-table--cards td[data-key="Comments"] .text-truncate {
  display: -webkit-box !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical;
  color: #334f53;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

#main-table.notion-table--cards td[data-key="Brief Description"] .text-truncate { -webkit-line-clamp: 2; }
#main-table.notion-table--cards td[data-key="Comments"] .text-truncate { -webkit-line-clamp: 5; }

/* Comentarios como una nota destacada a la derecha */
#main-table.notion-table--cards > tbody > tr > td[data-key="Comments"] {
  margin-top: 4px;
  border-color: rgba(214, 170, 60, 0.20);
  background: #fffbef;
}

#main-table.notion-table--cards > tbody > tr > td[data-key="Comments"]::before {
  content: "💬  " attr(data-label);
  color: #8a6a1f;
}

#main-table.notion-table--cards > tbody > tr > td[data-key="Comments"].editable-cell:hover {
  border-color: rgba(214, 170, 60, 0.40);
  background: #fff5d9 !important;
}

#main-table.notion-table--cards > tbody > tr > td[data-key="Comments"].editable-cell:hover::before {
  content: "💬  " attr(data-label) "  ·  editar";
  color: #7a5a10;
}

#main-table.notion-table--cards td[data-key="Comments"].editable-cell .cell-empty::after,
#main-table.notion-table--cards td[data-key="Comments"].editable-cell:hover .cell-empty::after {
  content: "Escribe un comentario…";
  color: #b39a5c;
  font-weight: 600;
}

/* Sin comentarios: discreto, sin el fondo amarillo */
#main-table.notion-table--cards > tbody > tr > td[data-key="Comments"]:has(> .cell-empty) {
  border-color: rgba(7, 90, 98, 0.10);
  border-style: dashed;
  background: transparent;
}

#main-table.notion-table--cards > tbody > tr > td[data-key="Comments"]:has(> .cell-empty)::before { color: #7c9396; }

#main-table.notion-table--cards > tbody > tr > td[data-key="Comments"].editing {
  background: #fff !important;
}

#main-table.notion-table--cards td[data-key="Comments"] textarea.inline-input { min-height: 120px; }
#main-table.notion-table--cards td[data-key="Brief Description"] textarea.inline-input { min-height: 96px; }

/* Hitos: fila compacta */
#main-table.notion-table--cards td[data-key^="Deadline "] .date-range {
  color: var(--moa-ink, #103f46);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* ─── Aviso de calidad: borde de color en la tarjeta ─────────────────────── */
#main-table.notion-table--cards > tbody > tr.task-row--quality-blocker {
  border-color: rgba(239, 53, 104, 0.35);
  box-shadow: inset 4px 0 0 #ef3568, 0 10px 30px rgba(7, 75, 81, 0.07);
  background: #fffafb;
}

#main-table.notion-table--cards > tbody > tr.task-row--quality-suggestion:not(.task-row--quality-blocker) {
  box-shadow: inset 4px 0 0 #d2a227, 0 10px 30px rgba(7, 75, 81, 0.07);
}

#main-table.notion-table--cards > tbody > tr > td:first-child { box-shadow: none; }

/* Resaltado temporal al llegar a una tarea (avisos, calidad, calendario) */
#main-table.notion-table--cards > tbody > tr.task-row-highlight {
  animation: moaTaskCardHighlight 1.8s ease;
}

@keyframes moaTaskCardHighlight {
  0%, 100% { outline: 0 solid rgba(243, 188, 46, 0); }
  18%, 72% { outline: 3px solid rgba(243, 188, 46, 0.70); outline-offset: 2px; }
}

/* ─── Sub-items: tarjeta más pequeña, colgada de su tarea ────────────────── */
#main-table.notion-table--cards > tbody > tr.subitem-row {
  position: relative;
  margin: -4px 0 10px 34px;
  padding: 6px 10px 8px;
  border-style: dashed;
  border-radius: 14px;
  background: rgba(246, 252, 252, 0.95);
  box-shadow: none;
}

#main-table.notion-table--cards > tbody > tr.subitem-row::before {
  content: "";
  position: absolute;
  top: -8px;
  bottom: 50%;
  left: -20px;
  width: 16px;
  border-left: 2px solid rgba(7, 90, 98, 0.16);
  border-bottom: 2px solid rgba(7, 90, 98, 0.16);
  border-bottom-left-radius: 10px;
  pointer-events: none;
}

#main-table.notion-table--cards > tbody > tr.subitem-row .task-title { font-size: 13.5px; }

#main-table.notion-table--cards .task-title-wrap--subitem {
  display: flex;
  min-width: 0;
  max-width: none;
}

/* Fila "Nuevo sub-item" */
#main-table.notion-table--cards > tbody > tr.subitem-create-row {
  margin: -4px 0 14px 34px;
}

#main-table.notion-table--cards > tbody > tr.subitem-create-row > td {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}

#main-table.notion-table--cards .subitem-create-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#main-table.notion-table--cards .subitem-create-input {
  flex: 1 1 220px;
  min-width: 0;
}

/* Estado vacío y botón "Mostrar más" */
#main-table.notion-table--cards > tbody > tr > td.table-empty-state,
#main-table.notion-table--cards > tbody > tr.task-render-more-row > td {
  display: block;
  padding: 18px;
  border: 1px solid rgba(7, 90, 98, 0.11);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.90);
  text-align: center;
}

#main-table.notion-table--cards > tbody > tr.task-render-more-row > td { padding: 6px; }

/* Personas editando en tiempo real: la etiqueta flota sobre el campo */
#main-table.notion-table--cards > tbody > tr > td.is-remotely-edited {
  box-shadow: inset 0 0 0 1px rgba(33, 169, 179, 0.40);
  background: rgba(234, 249, 249, 0.80);
}

/* ─── Pantallas medianas: 2 columnas ─────────────────────────────────────── */
@media (max-width: 1100px) {
  #main-table.notion-table--cards > tbody > tr.task-parent-row,
  #main-table.notion-table--cards > tbody > tr.subitem-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "title    title    title    title"
      "estado   estado   dates    dates"
      "tipo     vertical calidad  calidad"
      "people   people   people   people"
      "brief    brief    brief    brief"
      "comments comments comments comments"
      "hito1    hito2    hito3    hito4";
  }
}

/* ─── Móvil: 1 columna, hitos en 2×2 ─────────────────────────────────────── */
@media (max-width: 640px) {
  .task-layout-switch { margin-right: 2px; }
  .task-layout-switch__btn { padding: 5px 8px; font-size: 0; gap: 0; }

  #main-table.notion-table--cards > tbody > tr.task-parent-row,
  #main-table.notion-table--cards > tbody > tr.subitem-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "title    title"
      "estado   dates"
      "tipo     vertical"
      "calidad  calidad"
      "people   people"
      "brief    brief"
      "comments comments"
      "hito1    hito2"
      "hito3    hito4";
    padding: 8px;
  }

  #main-table.notion-table--cards > tbody > tr.subitem-row,
  #main-table.notion-table--cards > tbody > tr.subitem-create-row {
    margin-left: 18px;
  }

  #main-table.notion-table--cards > tbody > tr.subitem-row::before { left: -12px; width: 9px; }

  #main-table.notion-table--cards .task-title { font-size: 14.5px; }
}

/* ─── Editores de opciones y fechas: flotan sobre la tarjeta ─────────────
   Así la tarjeta no cambia de tamaño mientras eliges un estado, una persona
   o una fecha. Brief, comentarios y título se editan en su sitio. */
#main-table.notion-table--cards > tbody > tr > td.editing:not([data-key="TASKS"]):not([data-key="Brief Description"]):not([data-key="Comments"]) {
  min-height: 52px;
}

#main-table.notion-table--cards td.editing:not([data-key="TASKS"]):not([data-key="Brief Description"]):not([data-key="Comments"]) > .inline-editor {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  width: max(100%, 300px);
  max-width: min(420px, 92vw);
  padding: 8px;
  border: 1px solid rgba(7, 90, 98, 0.16);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 55px rgba(7, 75, 81, 0.22);
  box-sizing: border-box;
}

/* Las de la columna derecha se abren hacia la izquierda para no salirse */
#main-table.notion-table--cards td.editing[data-key="Fecha de Inicio y Fin"] > .inline-editor,
#main-table.notion-table--cards td.editing[data-key="Specialists"] > .inline-editor {
  right: 0;
  left: auto;
}

#main-table.notion-table--cards td.editing > .inline-editor--quick-select {
  padding: 8px;
}

#main-table.notion-table--cards td.editing .multi-options {
  max-height: 300px;
  overflow-y: auto;
}

@media (max-width: 640px) {
  #main-table.notion-table--cards td.editing:not([data-key="TASKS"]):not([data-key="Brief Description"]):not([data-key="Comments"]) > .inline-editor {
    width: min(320px, 86vw);
  }
  #main-table.notion-table--cards td.editing[data-key="Vertical"] > .inline-editor,
  #main-table.notion-table--cards td.editing[data-key="Deadline 2"] > .inline-editor,
  #main-table.notion-table--cards td.editing[data-key="Deadline 4"] > .inline-editor,
  #main-table.notion-table--cards td.editing[data-key="Fecha de Inicio y Fin"] > .inline-editor {
    right: 0;
    left: auto;
  }
}