/* ============================================================
   PINTURERÍAS HELPDESK - TARJETAS DEL TABLERO
   Archivo: assets/default/css/dashboard_cards.css
   Revisión documental: v1.3

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

   MAPA DE CLASES
   ------------------------------------------------------------
   .helpdesk-dashboard               bloque completo del tablero
   .helpdesk-dashboard__encabezado   título + botón nueva solicitud
   .btn-nueva-solicitud              CTA de alta de ticket
   .dashboard-cards                  rejilla de tarjetas
   .card-ticket                      modelo base
   .card-abierto                     azul
   .card-pendiente                   amarillo
   .card-urgente                     rojo
   .card-cerrado                     verde

   SUGERENCIAS
   ------------------------------------------------------------
   - Para estilo Jira/ServiceNow, cambiar border-radius de 999px
     a 8px-10px en .btn-nueva-solicitud.
   - Las tarjetas se adaptan a 2 columnas <=850px y 1 <=560px.
   ============================================================ */

/* CONTENEDOR GENERAL DEL TABLERO */
.helpdesk-dashboard {
    margin: 0 0 22px;
}
/* ENCABEZADO: título a la izquierda, CTA a la derecha */
.helpdesk-dashboard__encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}
.helpdesk-dashboard__titulo { margin: 0 !important; font-size: 23px; }
.helpdesk-dashboard__subtitulo { margin: 4px 0 0; color: #667986; }
/* BOTÓN PRINCIPAL: Crear nueva solicitud */
.btn-nueva-solicitud {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px !important;
    border-radius: 999px;
    background: linear-gradient(135deg, #0877b9, #13a59b);
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(8,119,185,.23);
    transition: transform .18s ease, box-shadow .18s ease;
}
.btn-nueva-solicitud:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(8,119,185,.29);
    border-bottom: 0 !important;
    text-decoration: none;
}
/* GRID RESPONSIVE DE TARJETAS */
.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
/* MODELO BASE DE CADA TARJETA */
.card-ticket {
    position: relative;
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 1px 12px;
    align-items: center;
    min-height: 94px;
    box-sizing: border-box;
    padding: 16px;
    border-radius: 17px;
    color: #fff !important;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(32,55,68,.16);
    border-bottom: 0 !important;
    transition: transform .18s ease, box-shadow .18s ease;
}
.card-ticket::after {
    content: "";
    position: absolute;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    right: -24px;
    bottom: -34px;
    background: rgba(255,255,255,.12);
}
.card-ticket:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(32,55,68,.23); }
/* CONTENEDOR DEL ICONO */
.card-icono {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255,255,255,.16);
    font-size: 22px;
}
.card-numero { font-size: 29px; line-height: 1; font-weight: 800; }
.card-titulo { font-size: 12px; font-weight: 600; opacity: .96; }
/* COLORES SEMÁNTICOS POR ESTADO */
.card-abierto { background: linear-gradient(135deg, #0877b9, #1196c2); }
.card-pendiente { background: linear-gradient(135deg, #d89b24, #efb74a); }
.card-urgente { background: linear-gradient(135deg, #b83245, #df5363); }
.card-cerrado { background: linear-gradient(135deg, #24875f, #3baa7d); }

/* TABLET: 2 COLUMNAS */
@media (max-width: 850px) {
    .dashboard-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* MÓVIL: 1 COLUMNA */
@media (max-width: 560px) {
    .helpdesk-dashboard__encabezado { align-items: stretch; flex-direction: column; }
    .btn-nueva-solicitud { width: 100%; box-sizing: border-box; }
    .dashboard-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   AJUSTES v1.3 PARA EL BUSCADOR DE tickets.php
   Estas clases están colocadas explícitamente en tickets.inc.php.
   ============================================================ */

body.pinturerias-portal .tickets-search-card {
    margin-top: 18px;
    margin-bottom: 22px;
    padding: 14px 16px;
}

body.pinturerias-portal .tickets-search-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

body.pinturerias-portal .tickets-search-form .pull-right {
    margin-left: auto;
}

body.pinturerias-portal .btn-buscar-ticket {
    min-width: 92px;
}

body.pinturerias-portal .tickets-list-header {
    margin-top: 22px !important;
    margin-bottom: 12px !important;
}

@media (max-width: 760px) {
    body.pinturerias-portal .tickets-search-form .pull-right {
        width: 100%;
        margin-left: 0;
        margin-top: 8px;
    }
}