/* ============================================================
   assets/css/style.css — Modelo 1: Corporativo Elegante
   Paleta: Granate #7B1D2E · Marino #1C2B3A · Blanco · Gris
   ============================================================ */

:root {
    --granate:       #7B1D2E;
    --granate-dark:  #5a1220;
    --granate-light: #f9f0f1;
    --marino:        #1C2B3A;
    --lr-primary:    #1C2B3A;
    --lr-accent:     #7B1D2E;
    --gris-bg:       #F7F5F2;
    --gris-borde:    #DDD9D4;
    --gris-input:    #FAFAF9;
    --texto:         #222222;
    --texto-muted:   #6B6560;
}

body { font-family:'Segoe UI',Arial,sans-serif; background:var(--gris-bg); color:var(--texto); }

.aviso-lr { background:var(--granate); font-size:.78rem; letter-spacing:.06em; font-weight:600; }
.alert { padding: .5rem 1rem; font-size: .9rem; }
.lr-wrapper { max-width:780px; margin:0 auto; }

.lr-header { background:#fff; border-bottom:3px solid var(--granate); text-align:center; padding:1.5rem 2rem 1.2rem; margin-bottom:1.25rem; }
.lr-header .lr-icon { font-size:1.8rem; color:var(--granate); display:block; margin-bottom:.3rem; }
.lr-header h1 { font-size:1.45rem; color:var(--marino); font-weight:700; margin-bottom:.2rem; }
.lr-header .lr-subinfo { font-size:.78rem; color:var(--texto-muted); }

.lr-infobox { background:#EBF0F6; border-left:4px solid var(--marino); border-radius:0 4px 4px 0; padding:.75rem 1rem; font-size:.82rem; color:var(--marino); margin-bottom:1.25rem; line-height:1.55; }

.lr-section { background:#fff; border:1px solid var(--gris-borde); border-radius:4px; margin-bottom:1rem; overflow:hidden; }
.lr-section-title { font-size:.78rem; font-weight:700; color:var(--texto-muted); text-transform:uppercase; letter-spacing:.08em; padding:.6rem 1.1rem; border-bottom:1px solid var(--gris-borde); background:var(--gris-bg); display:flex; align-items:center; gap:.5rem; }
.lr-num { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; background:var(--granate); color:#fff; border-radius:50%; font-size:.68rem; font-weight:700; flex-shrink:0; }
.lr-section-body { padding:1.1rem 1.25rem; }

.tipo-card { border:2px solid var(--gris-borde); border-radius:4px; padding:1rem; cursor:pointer; transition:border-color .2s,background .2s; background:#fff; display:flex; align-items:center; gap:.75rem; }
.tipo-card:hover { border-color:var(--granate); background:var(--granate-light); }
.tipo-card.selected { border-color:var(--granate); background:var(--granate-light); }
.tipo-radio { width:16px; height:16px; border:2px solid var(--gris-borde); border-radius:50%; flex-shrink:0; transition:border-color .2s; }
.tipo-card.selected .tipo-radio { border-color:var(--granate); background:var(--granate); box-shadow:inset 0 0 0 3px #fff; }
.tipo-card-label { font-size:.82rem; font-weight:700; color:var(--marino); margin-bottom:.15rem; }
.tipo-card.selected .tipo-card-label { color:var(--granate); }
.tipo-card-desc { font-size:.75rem; color:var(--texto-muted); line-height:1.4; }

.form-label { font-size:.78rem; font-weight:600; color:var(--marino); margin-bottom:.3rem; }
.form-control,.form-select { border:1px solid var(--gris-borde); border-radius:4px; background:var(--gris-input); font-size:.85rem; color:var(--texto); padding:.45rem .75rem; transition:border-color .2s,box-shadow .2s; }
.form-control:focus,.form-select:focus { border-color:var(--granate); box-shadow:0 0 0 3px rgba(123,29,46,.12); background:#fff; outline:none; }
.form-control::placeholder { color:#B8B4AE; }
.form-text { font-size:.72rem; color:var(--texto-muted); }

.lr-confirm-box { border:1.5px solid var(--granate); background:var(--granate-light); border-radius:4px; padding:.9rem 1rem; margin-bottom:1rem; }
.lr-confirm-box .form-check-input:checked { background-color:var(--granate); border-color:var(--granate); }
.lr-confirm-box .form-check-label { font-size:.8rem; line-height:1.55; color:var(--texto); }
.lr-privacy { background:#EBF0F6; border-radius:4px; padding:.6rem .9rem; font-size:.75rem; color:var(--texto-muted); margin-bottom:1rem; display:flex; align-items:flex-start; gap:.5rem; }
.lr-privacy i { color:var(--marino); flex-shrink:0; margin-top:1px; }

.btn-lr-primary { background:var(--granate); border:none; color:#fff; font-weight:600; font-size:.88rem; padding:.55rem 1.6rem; border-radius:4px; transition:background .2s; }
.btn-lr-primary:hover { background:var(--granate-dark); color:#fff; }
.btn-lr-secondary { background:#fff; border:1.5px solid var(--gris-borde); color:var(--texto-muted); font-size:.88rem; padding:.55rem 1.2rem; border-radius:4px; transition:background .2s; }
.btn-lr-secondary:hover { background:var(--gris-bg); }

.lr-success-box { background:#fff; border:1px solid var(--gris-borde); border-top:4px solid #2d8653; border-radius:4px; text-align:center; padding:2.5rem 2rem; }
.lr-success-num { font-size:1.6rem; font-weight:700; color:var(--granate); font-family:'Courier New',monospace; letter-spacing:.05em; }

.lr-footer { font-size:.72rem; color:var(--texto-muted); text-align:center; padding:1rem 0 1.5rem; line-height:1.7; }

@media(max-width:768px){
    .tipo-card { margin-bottom:.5rem; }
    .lr-section-body { padding:.9rem; }
}

/* ============================================================
   ADMIN — Modelo 1: Corporativo Elegante
   Paleta: Sidebar granate oscuro · Fondo blanco/gris suave
   ============================================================ */

/* Sidebar */
.sidebar {
    width: 240px;
    min-width: 240px;
    min-height: 100vh;
    background: var(--lr-primary);
    display: flex;
    flex-direction: column;
    padding: 0;
}

.sidebar-brand {
    padding: 1.1rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
    color: #fff;
    font-weight: 700;
    font-size: .83rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    letter-spacing: .01em;
}

.sidebar-brand i { font-size: 1.2rem; opacity: .9; }

.sidebar-nav { padding: .65rem .6rem; flex-grow: 1; }

.sidebar .nav-link {
    padding: .55rem .9rem;
    color: rgba(255,255,255,.72);
    border-radius: 6px;
    font-size: .84rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    transition: background .15s, color .15s;
    text-decoration: none;
    margin-bottom: 2px;
}
.sidebar .nav-link i { font-size: .95rem; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.13); color: #fff; }
.sidebar .nav-link.active {
    background: rgba(255,255,255,.2);
    color: #fff;
    font-weight: 600;
}

.sidebar-footer {
    padding: .85rem 1rem 1rem;
    border-top: 1px solid rgba(255,255,255,.12);
}
.sidebar-footer .admin-name {
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .5rem;
}
.sidebar-footer .nav-link { color: rgba(255,255,255,.6); font-size: .82rem; }
.sidebar-footer .nav-link:hover { color: #fff; background: rgba(255,255,255,.1); }

/* Admin layout */
.admin-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #F8F7F5;
}

/* Topbar */
.admin-topbar {
    background: #fff;
    border-bottom: 1px solid #E6E2DC;
    padding: .85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
}
.admin-topbar .page-title { font-size: 1.05rem; font-weight: 700; color: var(--marino); margin: 0; line-height: 1.2; }
.admin-topbar .page-sub   { font-size: .72rem; color: var(--texto-muted); margin-top: 1px; }
.admin-user { display: flex; align-items: center; gap: .55rem; font-size: .83rem; color: var(--texto-muted); }
.admin-avatar {
    width: 30px; height: 30px;
    background: var(--granate); color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700;
}

/* Content */
.admin-content { padding: 1.4rem 1.5rem; }

/* Stat cards */
.stat-card {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #EAE6E0;
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .9rem;
    transition: box-shadow .2s;
}
.stat-card:hover { box-shadow: 0 3px 14px rgba(0,0,0,.07); }
.stat-icon {
    width: 46px; height: 46px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; flex-shrink: 0;
}
.stat-icon.ic-granate { background: rgba(123,29,46,.1);  color: var(--granate); }
.stat-icon.ic-warning { background: rgba(220,138,0,.12); color: #c07800; }
.stat-icon.ic-success { background: rgba(25,135,84,.11); color: #198754; }
.stat-icon.ic-info    { background: rgba(14,110,184,.1); color: #0e6eb8; }
.stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--marino); }
.stat-label { font-size: .73rem; color: var(--texto-muted); margin-top: 3px; }
.stat-link  { font-size: .7rem; color: var(--granate); text-decoration: none; }
.stat-link:hover { text-decoration: underline; }

/* Card styles */
.card { border-radius: 8px; }
.card-header {
    background: #fff;
    border-bottom: 1px solid #EAE6E0;
    font-size: .88rem;
    padding: .8rem 1rem;
}
.card-header.ch-garnet { border-left: 3px solid var(--granate); }

/* Buttons - override Bootstrap primary → granate */
.btn-primary            { background-color: var(--granate); border-color: var(--granate); }
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus      { background-color: var(--granate-dark); border-color: var(--granate-dark); }
.btn-outline-primary    { color: var(--granate); border-color: var(--granate); }
.btn-outline-primary:hover { background: var(--granate); border-color: var(--granate); color: #fff; }

/* Pagination */
.page-item.active .page-link { background: var(--granate); border-color: var(--granate); }
.page-link { color: var(--granate); }
.page-link:hover { color: var(--granate-dark); }

/* Table */
.table-light th { background: #F5F3F0 !important; color: var(--marino); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.table-hover tbody tr:hover td { background: rgba(123,29,46,.04); }

/* Misc */
.cursor-pointer { cursor: pointer; }
.table-reclamaciones th { white-space: nowrap; }
.numero-rec { font-family: 'Courier New', monospace; font-weight: bold; color: var(--marino); font-size: .82rem; }
.plazo-urgente { color: var(--granate); font-weight: bold; }
.badge-pendiente  { background: #ffc107; color: #000; }
.badge-en_proceso { background: #0dcaf0; color: #000; }
.badge-respondido { background: #198754; }
.badge-cerrado    { background: #6c757d; }