:root {
  --fondo: #f4f5f7; --tarjeta: #fff; --tinta: #1b2330; --suave: #5d6878; --borde: #dfe3e9; --marca: #17324d; --acento: #1f6feb;
  --verde: #1a7f4b; --verde-bg: #e4f5ec; --rojo: #b42318; --rojo-bg: #fdecea; --ambar: #8a5a00; --ambar-bg: #fdf3d7;
  --azul: #1558b0; --azul-bg: #e6f0fd; --lila: #5b3fb5; --lila-bg: #efeafc; --gris: #4d5866; --gris-bg: #eceff3;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--acento); }
h1 { font-size: 1.45rem; line-height: 1.25; margin: .25rem 0 0; }
h2 { font-size: 1rem; margin: 0 0 .75rem; }
h3 { font-size: .88rem; margin: 1.1rem 0 .5rem; color: var(--suave); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.barra { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 1.25rem; background: var(--marca); color: #fff; }
.marca { color: #fff; font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: .55rem; }
.punto { width: 10px; height: 10px; border-radius: 50%; background: #4cc38a; }
.barra-der { display: flex; align-items: center; gap: .8rem; }
.quien { font-size: .85rem; opacity: .85; }
.contenido { max-width: 1240px; margin: 0 auto; padding: 1.25rem; }

.btn { display: inline-block; border: 1px solid var(--marca); background: var(--marca); color: #fff; padding: .5rem .9rem; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover { filter: brightness(1.15); }
.btn:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid #7fb0ff; outline-offset: 1px; }
.btn.claro { background: #fff; color: var(--marca); border-color: #b9c3cf; }
.btn.claro:hover { background: var(--gris-bg); filter: none; }
.btn.verde { background: var(--verde); border-color: var(--verde); }
.btn.chico { padding: .28rem .6rem; font-size: .82rem; }
.btn.ancho { width: 100%; margin-top: 1rem; }

input, select, textarea { font: inherit; color: inherit; background: #fff; border: 1px solid #c4ccd6; border-radius: 8px; padding: .48rem .65rem; max-width: 100%; }
textarea { width: 100%; resize: vertical; }
label { display: block; font-size: .82rem; font-weight: 600; color: var(--suave); margin-bottom: .25rem; }

.aviso { padding: .65rem .9rem; border-radius: 8px; margin: 0 0 1rem; }
.aviso.ok { background: var(--verde-bg); color: #125c37; }
.aviso.mal { background: var(--rojo-bg); color: #8e1c13; }
.aviso.alerta { background: var(--ambar-bg); color: #6b4600; }

.insignia { display: inline-block; padding: .08rem .55rem; border-radius: 99px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.insignia.azul { background: var(--azul-bg); color: var(--azul); }
.insignia.lila { background: var(--lila-bg); color: var(--lila); }
.insignia.ambar { background: var(--ambar-bg); color: var(--ambar); }
.insignia.verde { background: var(--verde-bg); color: var(--verde); }
.insignia.rojo { background: var(--rojo-bg); color: var(--rojo); }
.insignia.rojo-fuerte { background: var(--rojo); color: #fff; }
.insignia.gris { background: var(--gris-bg); color: var(--gris); }
.codigo { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; color: var(--suave); }
.nota { color: var(--suave); font-size: .82rem; }

.datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.dato { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; padding: .7rem 1rem; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.dato:hover { border-color: #9fb0c3; }
.dato-n { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.dato-nombre { font-size: .82rem; color: var(--suave); }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.filtros input[type=search] { flex: 1 1 220px; }

.lista-tickets { display: flex; flex-direction: column; gap: .6rem; }
.fila-ticket { display: block; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; padding: .8rem 1rem; text-decoration: none; color: inherit; }
.fila-ticket:hover { border-color: #9fb0c3; box-shadow: 0 1px 6px rgba(20, 40, 70, .08); }
.fila-cab { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.fila-fecha { margin-left: auto; color: var(--suave); font-size: .8rem; }
.fila-titulo { font-weight: 700; margin-top: .3rem; }
.fila-resumen { margin: .15rem 0 .35rem; color: #39434f; }
.fila-pie { font-size: .82rem; color: var(--suave); }
.vacio { color: var(--suave); padding: 1.5rem 0; text-align: center; }
.conexiones { margin-top: 1.25rem; font-size: .8rem; color: var(--suave); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.conexion::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .3rem; background: var(--verde); }
.conexion.no::before { background: #c3cad3; }

.migas { margin: 0 0 .6rem; font-size: .88rem; }
.cabecera-ticket { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1rem; }
.sobre { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; }
.cambio-estado { display: flex; align-items: center; gap: .4rem; }
.cambio-estado label { margin: 0; }
.cambio-estado select { padding: .25rem .45rem; font-size: .85rem; }
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.columna-principal, .columna-lateral { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; padding: 1rem 1.15rem; }
.tarjeta.resumen { border-left: 4px solid var(--acento); }
.tarjeta.resumen p:first-of-type { margin-top: 0; }
.tarjeta.resumen .nota { margin-bottom: 0; }
.tarjeta.publicar { border-left: 4px solid var(--verde); }
.tarjeta.publicar textarea { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; }
.campos-ticket { margin: 0; }
.campo-ticket { margin-bottom: .8rem; }
.campo-ticket dt { font-size: .78rem; font-weight: 700; color: var(--suave); }
.campo-ticket dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.compacto .campo-ticket { margin-bottom: .5rem; }
.compacto dd { font-size: .88rem; }
.capturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.captura { display: block; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; text-decoration: none; color: var(--suave); font-size: .78rem; }
.captura img { display: block; width: 100%; height: 130px; object-fit: cover; background: var(--gris-bg); }
.captura span { display: block; padding: .25rem .5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adjunto { display: block; border: 1px solid var(--borde); border-radius: 8px; padding: .55rem .7rem; overflow-wrap: anywhere; }
.texto-largo { white-space: pre-wrap; overflow-wrap: anywhere; }

.encargo { margin: .5rem 0 0; }
.separado { margin-top: .6rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.trabajando { background: var(--lila-bg); color: var(--lila); border-radius: 8px; padding: .6rem .85rem; font-weight: 600; }
.trabajo { border-top: 1px solid var(--borde); margin-top: 1rem; padding-top: .9rem; }
.trabajo header { margin-bottom: .45rem; }
.instruccion { background: var(--gris-bg); border-radius: 6px; padding: .4rem .65rem; margin: .4rem 0; font-size: .88rem; }
.archivos { list-style: none; padding: 0; margin: .7rem 0; font-size: .86rem; }
.archivos li { padding: .12rem 0; overflow-wrap: anywhere; }
.accion { display: inline-block; min-width: 78px; font-size: .74rem; font-weight: 700; }
.accion.nuevo { color: var(--verde); } .accion.modificado { color: var(--azul); } .accion.borrado { color: var(--rojo); }
.diff summary { cursor: pointer; font-weight: 600; margin: .5rem 0; }
.diff pre { background: #10161f; color: #d5dce5; border-radius: 8px; padding: .7rem .85rem; overflow: auto; max-height: 560px; font-size: .78rem; line-height: 1.45; margin: 0; }
.d { display: block; width: max-content; min-width: 100%; }
.d.mas { background: #123524; color: #9ce6bd; }
.d.menos { background: #3d1a18; color: #f5b2ab; }
.d.pos { color: #8ab4f8; }
.d.cab { color: #fff; font-weight: 700; }

.mensajes { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.mensaje { border: 1px solid var(--borde); border-radius: 8px; padding: .6rem .8rem; }
.mensaje.soporte { background: #f5f8fc; }
.mensaje.interno { background: var(--ambar-bg); border-color: #f0e0ac; }
.mensaje-cab { margin-bottom: .2rem; }
.historial { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.historial li { padding: .35rem 0; border-bottom: 1px solid #edf0f3; overflow-wrap: anywhere; }
.historial li:last-child { border: 0; }

.ingreso { max-width: 380px; margin: 3.5rem auto; display: flex; flex-direction: column; gap: .35rem; }
.ingreso h1 { margin-bottom: .75rem; }
.ingreso input { width: 100%; margin-bottom: .55rem; }

@media (max-width: 900px) {
  .dos-columnas { grid-template-columns: minmax(0, 1fr); }
  .datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .contenido { padding: 1rem; }
  .filtros select, .filtros .btn { flex: 1 1 45%; }
  .fila-fecha { margin-left: 0; width: 100%; }
}