/* CEBSA Tickets TI — estilos propios sobre Bootstrap.
 * Objetivo (Fase 1 §38): densidad de información y velocidad para gente que
 * resuelve tickets todo el día — no una app bonita para mostrar en una demo.
 */

:root {
    --app-ink: #1b2430;
    --app-navbar-bg: #16202c;
    --app-border: #d7dde3;
    --app-muted-bg: #f4f6f8;
    --app-public-bg: #eef5ff;
    --app-public-border: #3b6fa0;
    --app-internal-bg: #fff6e0;
    --app-internal-border: #b8862f;
}

body {
    background: #f7f8fa;
    color: var(--app-ink);
    font-size: 0.925rem;
}

.app-navbar {
    background: var(--app-navbar-bg);
}
.app-navbar .navbar-brand,
.app-navbar .nav-link,
.app-navbar .navbar-text {
    color: #e7ecf1;
}
.app-navbar .nav-link.active {
    color: #fff;
    font-weight: 600;
}

.app-main {
    padding: 1rem 1.25rem 2rem;
}

/* Densidad: tablas compactas, sin aire de sobra */
.table-compact td,
.table-compact th {
    padding: 0.4rem 0.6rem;
    vertical-align: middle;
    font-size: 0.9rem;
}

.dash-tile {
    display: block;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 6px;
    padding: 0.85rem 1rem;
    text-decoration: none;
    color: var(--app-ink);
    height: 100%;
}
.dash-tile:hover {
    border-color: #8fa7bf;
    background: #fbfcfd;
}
.dash-tile .dash-tile-count {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.dash-tile .dash-tile-label {
    font-size: 0.82rem;
    color: #55606b;
}
.dash-tile-pending {
    opacity: 0.55;
}
.dash-tile .dash-tile-hint {
    font-size: 0.72rem;
    color: #7b8794;
    margin-top: 0.3rem;
    line-height: 1.25;
}

/* Tonos de las cards de decisión del panel del agente — el color es
   semántico (urgencia real), no decorativo: se lee de un vistazo qué
   requiere atención inmediata vs. qué es solo contexto. */
.dash-tile-danger { border-left: 4px solid #b3261e; }
.dash-tile-danger .dash-tile-count { color: #b3261e; }
.dash-tile-warning { border-left: 4px solid #b8862f; }
.dash-tile-warning .dash-tile-count { color: #8a6417; }
.dash-tile-primary { border-left: 4px solid #2f6fb0; }
.dash-tile-primary .dash-tile-count { color: #2f6fb0; }
.dash-tile-muted { border-left: 4px solid #b7c0c9; }
.dash-tile-muted .dash-tile-count { color: #6b7480; }
.dash-tile-neutral { border-left: 4px solid #55606b; }

.badge-status {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.32em 0.6em;
}
.status-NUEVO { background: #5b6b7c; }
.status-ASIGNADO { background: #4a5fb8; }
.status-EN_PROCESO { background: #2f6fb0; }
.status-ESPERANDO_USUARIO { background: #b8862f; }
.status-ESPERANDO_TERCERO { background: #a56a1f; }
.status-PROGRAMADO { background: #2f8f8f; }
.status-EN_DESARROLLO { background: #7048a8; }
.status-EN_PRUEBAS { background: #9457c9; }
.status-RESUELTO { background: #2f9e56; }
.status-CERRADO { background: #6c757d; }
.status-CANCELADO { background: #8a2f2f; }

/* Ticket: metadata siempre visible arriba (Fase 1 §39) */
.ticket-header {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
}
.ticket-meta-item {
    font-size: 0.8rem;
    color: #55606b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ticket-meta-value {
    font-size: 0.95rem;
    font-weight: 600;
}

/* Conversación */
.ticket-message {
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--app-border);
    border-left-width: 4px;
}
.ticket-message-public {
    background: var(--app-public-bg);
    border-left-color: var(--app-public-border);
}
.ticket-message-internal {
    background: var(--app-internal-bg);
    border-left-color: var(--app-internal-border);
    border-left-style: dashed;
}
.ticket-message-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ticket-message-public .ticket-message-label { color: var(--app-public-border); }
.ticket-message-internal .ticket-message-label { color: var(--app-internal-border); }
.ticket-message-meta {
    font-size: 0.78rem;
    color: #6b7480;
}
.ticket-message-body {
    white-space: pre-wrap;
    margin-top: 0.35rem;
}

/* Cajas de respuesta — deben distinguirse a simple vista (Fase 1 §19) */
.reply-box textarea {
    border-width: 2px;
}
.reply-box-public textarea {
    border-color: var(--app-public-border);
}
.reply-box-public .reply-box-label {
    color: var(--app-public-border);
}
.reply-box-internal textarea {
    border-color: var(--app-internal-border);
    background: #fffdf5;
}
.reply-box-internal .reply-box-label {
    color: var(--app-internal-border);
}

.sidebar-card {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 6px;
    padding: 0.85rem;
    margin-bottom: 1rem;
}
.sidebar-card h6 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #55606b;
    margin-bottom: 0.6rem;
}

.history-entry {
    font-size: 0.82rem;
    border-left: 2px solid var(--app-border);
    padding-left: 0.6rem;
    margin-bottom: 0.5rem;
}
.history-entry time {
    color: #838d97;
    font-size: 0.75rem;
    display: block;
}