/* Tickets de Diseño.
 *
 * Acotado a .mod-diseno, como todos los módulos: los estilos de OTD y Despacho
 * ya chocaron una vez —uno alinea las tablas a la izquierda y el otro a la
 * derecha— y esa lección se paga una sola vez.
 *
 * Monocromo estricto (IKIGAI): el rojo es de --alarma y está reservado a lo
 * vencido. La urgencia se marca con peso y regla, no con color.
 */

/* ---- barra ---- */
.mod-diseno .barra{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--ink);padding-bottom:12px;
}
.mod-diseno .filtros{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.mod-diseno .filtros input[type=search]{
  font:inherit;font-size:14px;border:0;border-bottom:1px solid var(--rule);
  padding:6px 0;min-width:min(320px,60vw);background:none;color:var(--ink);
}
.mod-diseno .filtros input[type=search]:focus{outline:0;border-bottom-color:var(--ink)}
.mod-diseno .mios{font-size:13px;color:var(--meta);display:flex;align-items:center;gap:6px;cursor:pointer}
.mod-diseno .acciones{display:flex;align-items:center;gap:18px}
.mod-diseno .cta{font-size:13px;font-variant-numeric:tabular-nums}

/* ---- tablero ---- */
/* Scroll horizontal a propósito: con cinco columnas y una laptop de 13" caben
 * justas. Encogerlas hasta que quepan haría ilegible el título del trabajo, que
 * es lo único que se busca de un vistazo. */
.mod-diseno .tablero{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);
  gap:1px;background:var(--rule);border:1px solid var(--rule);
  margin-top:clamp(14px,1.6vw,24px);overflow-x:auto;
}
.mod-diseno .col{background:var(--paper);padding:10px;min-height:180px}
.mod-diseno .col-cab{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  border-bottom:1px solid var(--ink);padding-bottom:7px;margin-bottom:10px;
}
.mod-diseno .col-vacia{font-size:13px;padding:4px 0}

/* ---- tarjeta ---- */
.mod-diseno .tk{
  border:1px solid var(--rule);padding:9px 10px;margin-bottom:8px;cursor:pointer;
}
.mod-diseno .tk:hover{border-color:var(--ink)}
.mod-diseno .tk-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mod-diseno .folio{font-size:11px;letter-spacing:.06em;color:var(--meta)}
.mod-diseno .urg{
  font-size:10px;text-transform:uppercase;letter-spacing:.09em;font-weight:600;
  border:1px solid var(--ink);padding:1px 5px;
}
.mod-diseno .tk h4{font-size:14px;font-weight:600;line-height:1.3;margin:5px 0 2px}
.mod-diseno .cli{font-size:12px;color:var(--meta)}
.mod-diseno .tk-pie{display:flex;justify-content:space-between;gap:8px;font-size:11px;margin-top:8px}
.mod-diseno .pidio{font-size:11px;margin-top:2px}

/* ---- cerradas ---- */
.mod-diseno .cerrados{margin-top:clamp(24px,2.6vw,40px)}
.mod-diseno .plegable{
  font:inherit;font-size:13px;background:none;border:0;padding:0;cursor:pointer;
  color:var(--ink);border-bottom:1px solid var(--rule);width:100%;text-align:left;padding-bottom:8px;
}
.mod-diseno .plegable:hover{border-bottom-color:var(--ink)}
.mod-diseno .tabla{width:100%;border-collapse:collapse;font-size:13px}
.mod-diseno .tabla tr{border-bottom:1px solid var(--rule);cursor:pointer}
.mod-diseno .tabla tr:hover{background:#fafafa}
.mod-diseno .tabla td{padding:8px 10px 8px 0;text-align:left;vertical-align:baseline}
.mod-diseno .tabla .tit{font-weight:500}

/* ---- ficha ---- */
.mod-diseno .ficha{max-width:760px}
.mod-diseno .volver{
  font:inherit;font-size:13px;background:none;border:0;padding:0 0 14px;cursor:pointer;color:var(--meta);
}
.mod-diseno .volver:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.mod-diseno .ficha-cab{
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  border-bottom:1px solid var(--ink);padding-bottom:12px;
}
.mod-diseno .ficha h3{font-size:clamp(16px,1.4vw,21px);font-weight:600;letter-spacing:-.01em;margin:4px 0 2px}
.mod-diseno .chip{
  font-size:11px;text-transform:uppercase;letter-spacing:.09em;font-weight:500;
  border:1px solid var(--ink);padding:3px 9px;white-space:nowrap;
}
/* La bandeja de entrada se ve distinta a propósito: es lo que todavía no
 * arranca, que es justo lo que hay que notar sin buscarlo. */
.mod-diseno .chip-nueva{background:var(--ink);color:var(--paper)}
.mod-diseno .chip-cerrada,.mod-diseno .chip-cancelada{border-color:var(--rule);color:var(--meta)}

.mod-diseno .datos{display:flex;flex-wrap:wrap;gap:26px;margin:16px 0 8px}
.mod-diseno .datos dd{font-size:14px;margin-top:2px}
.mod-diseno .ficha h4{margin-top:clamp(22px,2.4vw,34px);padding-bottom:6px;border-bottom:1px solid var(--rule)}
.mod-diseno .desc{white-space:pre-wrap;font-size:14px;margin-top:10px}
.mod-diseno .adj{list-style:none;margin-top:10px;font-size:14px}
.mod-diseno .adj li{padding:5px 0;border-bottom:1px solid var(--rule)}
.mod-diseno .adj a{color:var(--ink);text-underline-offset:4px}
.mod-diseno .subir{margin-top:12px;font-size:13px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* ---- formas ---- */
.mod-diseno .forma{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin-top:16px}
.mod-diseno .forma .ancho{grid-column:1/-1}
.mod-diseno .forma label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--meta)}
.mod-diseno .forma input,.mod-diseno .forma select,.mod-diseno .forma textarea{
  font:inherit;font-size:14px;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:0;padding:9px 10px;width:100%;
}
.mod-diseno .forma input:focus,.mod-diseno .forma select:focus,.mod-diseno .forma textarea:focus{
  outline:0;border-color:var(--ink);
}
.mod-diseno .forma textarea{resize:vertical}
.mod-diseno .pie-forma{display:flex;justify-content:flex-end;align-items:center;gap:16px}
.mod-diseno .error{color:var(--alarma);font-size:13px;margin-right:auto}
.mod-diseno .mover{margin-top:clamp(22px,2.4vw,34px);border-top:1px solid var(--ink);padding-top:4px}
.mod-diseno .comentar{margin-top:20px}

/* ---- bitácora ---- */
.mod-diseno .bitacora{list-style:none;margin-top:12px}
.mod-diseno .bit{padding:10px 0 10px 12px;border-left:1px solid var(--rule);margin-bottom:2px}
/* El avance mueve el trabajo; el comentario opina. En una lista pareja se
 * confunden, y entonces la bitácora deja de contar la historia del ticket. */
.mod-diseno .bit-avance,.mod-diseno .bit-alta{border-left-color:var(--ink)}
.mod-diseno .bit-cab{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-size:12px}
.mod-diseno .bit .quien{font-weight:600;font-size:13px}
.mod-diseno .bit .paso{font-size:12px}
.mod-diseno .bit p{font-size:14px;margin-top:3px;white-space:pre-wrap}
.mod-diseno .bit-comentario .quien{font-weight:500}

@media (max-width:720px){
  .mod-diseno .forma{grid-template-columns:1fr}
  .mod-diseno .tablero{grid-auto-columns:minmax(180px,80vw)}
}