/* ============================================================
   PINTURERÍAS HELPDESK - ESTADO Y LÍNEA DE TIEMPO
   Archivo: assets/default/css/ticket_timeline.css
   Revisión documental: v1.3

   USADO PRINCIPALMENTE POR
   ------------------------------------------------------------
   include/client/view.inc.php

   MAPA DE CLASES
   ------------------------------------------------------------
   .ticket-status-strip          resumen superior
   .ticket-status-strip__item    cada bloque del resumen
   .ticket-pill                  etiqueta tipo píldora
   .estado-*                     color por estado
   .prioridad-*                  color por prioridad
   .ticket-timeline-corporativo  wrapper del hilo nativo
   #reply                        formulario de respuesta
   .helpdesk-actions             contenedor flexible de acciones

   NOTA
   ------------------------------------------------------------
   Este archivo NO crea la línea de tiempo; solamente estiliza
   la estructura que renderiza osTicket.
   ============================================================ */

/* RESUMEN DE ESTADO/PRIORIDAD/FECHA/DEPARTAMENTO */
.ticket-status-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 2px 0 18px;
    padding: 13px;
    border: 1px solid #dce6ec;
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fbfd, #f7fcfb);
}
.ticket-status-strip__item {
    min-width: 0;
    padding: 9px 10px;
    border-radius: 11px;
    background: rgba(255,255,255,.88);
}
.ticket-status-strip__etiqueta {
    display: block;
    margin-bottom: 6px;
    color: #738592;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
/* ETIQUETA VISUAL TIPO PÍLDORA */
.ticket-pill {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
/* PALETA DE ESTADOS Y PRIORIDADES */
.estado-abierto { background: #dff2fb; color: #076a9f; }
.estado-pendiente { background: #fff0c9; color: #91600b; }
.estado-cerrado { background: #dff5ea; color: #237657; }
.prioridad-emergencia { background: #fde3e7; color: #a8283b; }
.prioridad-alta { background: #fff0c9; color: #8a5d0c; }
.prioridad-normal { background: #e0f1fb; color: #11688f; }
.prioridad-baja { background: #e4f5ec; color: #2f7559; }

/* WRAPPER DE LA LÍNEA DE TIEMPO */
.ticket-timeline-corporativo {
    position: relative;
    margin: 20px 0 24px;
    padding: 5px 0;
}
.ticket-timeline-corporativo #ticketThread {
    border-bottom: 0;
}
.ticket-timeline-corporativo #ticketThread::before {
    border-left: 3px solid #d6e9f1;
    margin-left: 23px;
    z-index: 0;
}
.ticket-timeline-corporativo .thread-entry,
.ticket-timeline-corporativo .thread-event {
    position: relative;
    z-index: 1;
}
.ticket-timeline-corporativo .thread-entry {
    margin-bottom: 18px;
}
.ticket-timeline-corporativo .thread-entry.avatar {
    margin-left: 64px;
}
.ticket-timeline-corporativo .thread-entry.response.avatar {
    margin-left: 0;
    margin-right: 64px;
}
.ticket-timeline-corporativo .thread-entry > .avatar {
    width: 48px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(34,66,83,.18);
}
.ticket-timeline-corporativo img.avatar {
    border-radius: 50% !important;
}
/* CABECERA DE CADA MENSAJE/RESPUESTA */
.ticket-timeline-corporativo .thread-entry .header {
    padding: 9px 13px;
    border-color: #d6e2e8;
    border-radius: 12px 12px 0 0;
    font-weight: 600;
}
.ticket-timeline-corporativo .thread-entry.message .header {
    background: #e5f3fb;
}
.ticket-timeline-corporativo .thread-entry.response .header {
    background: #e8f7f2;
}
/* CUERPO DE CADA ENTRADA */
.ticket-timeline-corporativo .thread-entry .thread-body {
    border-color: #dbe4e9;
    border-bottom-width: 1px;
    border-radius: 0 0 12px 12px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(30,59,76,.07);
}
/* FORMULARIO DE RESPUESTA */
#reply {
    padding: 16px !important;
}
#reply h2 {
    color: #24556f;
    border-bottom: 1px solid #d9e5eb;
}
/* ALINEACIÓN DE BOTONES DE ACCIÓN */
.helpdesk-actions,
#reply > p[style*="text-align:center"] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* AJUSTES TABLET */
@media (max-width: 760px) {
    .ticket-status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ticket-timeline-corporativo .thread-entry.avatar { margin-left: 54px; }
    .ticket-timeline-corporativo .thread-entry.response.avatar { margin-right: 54px; }
}
/* AJUSTES MÓVIL */
@media (max-width: 480px) {
    .ticket-status-strip { grid-template-columns: 1fr; }
}