/* ============================================================
   assets/css/style.css — Colca Trek Lodge
   Paleta: Caramelo #C19B76 · Oscuro #1C1C1C · Naranja #FF9900
   Fuentes: Gilda Display (títulos) · Roboto (cuerpo)
   ============================================================ */

:root {
    --caramel:        #C19B76;
    --caramel-dark:   #A07D5C;
    --caramel-light:  #FAF6F0;
    --caramel-border: #E5D9C8;
    --lodge-dark:     #1C1C1C;
    --lodge-orange:   #FF9900;
    --lodge-gray:     #5C5C5C;
    --lr-primary:     #1C1C1C;
    --lr-accent:      #C19B76;
    --gris-bg:        #F9F9F9;
    --gris-borde:     #E8E0D5;
    --gris-input:     #FFFFFF;
    --texto:          #1C1C1C;
    --texto-muted:    #5C5C5C;
}

/* ── Base ── */
body {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    letter-spacing: 0.02em;
    background: var(--gris-bg);
    color: var(--texto);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Gilda Display', serif;
    font-weight: normal;
    color: var(--lodge-dark);
}

/* ── Barra aviso ── */
.aviso-lr {
    background: var(--lodge-dark);
    font-size: .75rem;
    letter-spacing: .1em;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
    border-bottom: 3px solid var(--caramel);
}

.alert { padding: .5rem 1rem; font-size: .9rem; }
.lr-wrapper { max-width: 800px; margin: 0 auto; }

/* ── Header ── */
.lr-header {
    background: #fff;
    border-bottom: 3px solid var(--caramel);
    text-align: center;
    padding: 2rem 2rem 1.5rem;
    margin-bottom: 1.25rem;
    position: relative;
}

.lr-header::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: var(--caramel);
    margin: .8rem auto 0;
    opacity: .5;
}

.lr-header h1 {
    font-family: 'Gilda Display', serif;
    font-size: 1.7rem;
    color: var(--lodge-dark);
    font-weight: normal;
    letter-spacing: .04em;
    margin-bottom: .3rem;
}

.lr-header .lr-subinfo {
    font-size: .78rem;
    color: var(--texto-muted);
    font-family: 'Roboto', sans-serif;
    letter-spacing: .03em;
}

/* ── Info box ── */
.lr-infobox {
    background: var(--caramel-light);
    border-left: 4px solid var(--caramel);
    border-radius: 0 4px 4px 0;
    padding: .85rem 1.1rem;
    font-size: .82rem;
    color: var(--lodge-dark);
    margin-bottom: 1.25rem;
    line-height: 1.6;
    font-family: 'Roboto', sans-serif;
}

/* ── Secciones del formulario ── */
.lr-section {
    background: #fff;
    border: 1px solid var(--gris-borde);
    border-radius: 2px;
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.lr-section-title {
    font-family: 'Roboto', sans-serif;
    font-size: .72rem;
    font-weight: 500;
    color: var(--texto-muted);
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: .65rem 1.2rem;
    border-bottom: 1px solid var(--gris-borde);
    background: var(--gris-bg);
    display: flex;
    align-items: center;
    gap: .55rem;
}

.lr-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--caramel);
    color: #fff;
    border-radius: 50%;
    font-size: .68rem;
    font-weight: 700;
    flex-shrink: 0;
    font-family: 'Roboto', sans-serif;
}

.lr-section-body { padding: 1.2rem 1.4rem; }

/* ── Tipo de reclamo / queja cards ── */
.tipo-card {
    border: 1.5px solid var(--gris-borde);
    border-radius: 2px;
    padding: 1.1rem;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    background: #fff;
    display: flex;
    align-items: center;
    gap: .85rem;
}

.tipo-card:hover {
    border-color: var(--caramel);
    background: var(--caramel-light);
}

.tipo-card.selected {
    border-color: var(--caramel);
    background: var(--caramel-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(--caramel);
    background: var(--caramel);
    box-shadow: inset 0 0 0 3px #fff;
}

.tipo-card-label {
    font-family: 'Gilda Display', serif;
    font-size: .95rem;
    font-weight: normal;
    color: var(--lodge-dark);
    margin-bottom: .15rem;
    letter-spacing: .02em;
}

.tipo-card.selected .tipo-card-label { color: var(--caramel-dark); }

.tipo-card-desc {
    font-size: .75rem;
    color: var(--texto-muted);
    line-height: 1.45;
    font-family: 'Roboto', sans-serif;
}

/* ── Campos del formulario ── */
.form-label {
    font-size: .75rem;
    font-weight: 500;
    color: var(--lodge-dark);
    margin-bottom: .3rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
}

.form-control,
.form-select {
    border: 1px solid var(--gris-borde);
    border-radius: 2px;
    background: var(--gris-input);
    font-size: .875rem;
    color: var(--texto);
    padding: .5rem .85rem;
    transition: border-color .2s, box-shadow .2s;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--caramel);
    box-shadow: 0 0 0 3px rgba(193,155,118,.15);
    background: #fff;
    outline: none;
}

.form-control::placeholder { color: #b8b0a6; }
.form-text { font-size: .72rem; color: var(--texto-muted); }

/* ── Confirmación ── */
.lr-confirm-box {
    border: 1.5px solid var(--caramel);
    background: var(--caramel-light);
    border-radius: 2px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}

.lr-confirm-box .form-check-input:checked {
    background-color: var(--caramel);
    border-color: var(--caramel);
}

.lr-confirm-box .form-check-label {
    font-size: .8rem;
    line-height: 1.6;
    color: var(--lodge-dark);
    font-family: 'Roboto', sans-serif;
}

/* ── Privacidad ── */
.lr-privacy {
    background: var(--caramel-light);
    border-radius: 2px;
    padding: .65rem 1rem;
    font-size: .75rem;
    color: var(--texto-muted);
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    border-left: 3px solid var(--caramel-border);
    font-family: 'Roboto', sans-serif;
}

.lr-privacy i { color: var(--caramel); flex-shrink: 0; margin-top: 1px; }

/* ── Botones ── */
.btn-lr-primary {
    background: var(--caramel);
    border: none;
    color: #fff;
    font-weight: 400;
    font-size: .88rem;
    padding: .6rem 1.8rem;
    border-radius: 2px;
    transition: background .2s;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
}

.btn-lr-primary:hover { background: var(--caramel-dark); color: #fff; }

.btn-lr-secondary {
    background: #fff;
    border: 1.5px solid var(--gris-borde);
    color: var(--texto-muted);
    font-size: .88rem;
    padding: .6rem 1.3rem;
    border-radius: 2px;
    transition: background .2s, border-color .2s;
    font-family: 'Roboto', sans-serif;
    letter-spacing: .04em;
}

.btn-lr-secondary:hover {
    background: var(--gris-bg);
    border-color: var(--caramel-border);
}

/* ── Caja de éxito ── */
.lr-success-box {
    background: #fff;
    border: 1px solid var(--gris-borde);
    border-top: 4px solid var(--caramel);
    border-radius: 2px;
    text-align: center;
    padding: 2.8rem 2rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.lr-success-num {
    font-family: 'Courier New', monospace;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--caramel);
    letter-spacing: .06em;
}

/* ── Footer del libro ── */
.lr-footer {
    font-size: .72rem;
    color: var(--texto-muted);
    text-align: center;
    padding: 1rem 0 1.8rem;
    line-height: 1.8;
    border-top: 1px solid var(--caramel-border);
    font-family: 'Roboto', sans-serif;
}

/* ── Selector de moneda ── */
.curr-toggle {
    display: inline-flex;
    border: 1px solid var(--caramel-border);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}

.curr-btn {
    background: #fff;
    border: none;
    padding: .2rem .55rem;
    font-size: .67rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: var(--texto-muted);
    cursor: pointer;
    transition: background .15s, color .15s;
    letter-spacing: .05em;
    line-height: 1.5;
}

.curr-btn + .curr-btn {
    border-left: 1px solid var(--caramel-border);
}

.curr-btn.active {
    background: var(--caramel);
    color: #fff;
}

.curr-btn:hover:not(.active) {
    background: var(--caramel-light);
    color: var(--caramel-dark);
}

.curr-symbol {
    border-color: var(--gris-borde);
    background: var(--gris-bg);
    color: var(--lodge-dark);
    font-weight: 500;
    letter-spacing: .03em;
    transition: color .15s;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .tipo-card { margin-bottom: .5rem; }
    .lr-section-body { padding: 1rem; }
    .lr-header { padding: 1.5rem 1rem 1.2rem; }
    .lr-header h1 { font-size: 1.35rem; }
}

/* ============================================================
   ADMIN — Colca Trek Lodge
   Sidebar oscuro con acento caramelo
   ============================================================ */

/* 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.2rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
    color: #fff;
    font-weight: 400;
    font-size: .8rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
}

.sidebar-brand i { font-size: 1.2rem; opacity: .85; color: var(--caramel); }

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

.sidebar .nav-link {
    padding: .55rem .9rem;
    color: rgba(255,255,255,.65);
    border-radius: 2px;
    font-size: .83rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    transition: background .15s, color .15s;
    text-decoration: none;
    margin-bottom: 2px;
    font-family: 'Roboto', sans-serif;
    letter-spacing: .03em;
}

.sidebar .nav-link i { font-size: .95rem; color: var(--caramel); opacity: .8; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.1); color: #fff; }
.sidebar .nav-link.active {
    background: rgba(193,155,118,.18);
    color: #fff;
    font-weight: 500;
    border-left: 2px solid var(--caramel);
}

.sidebar-footer {
    padding: .85rem 1rem 1rem;
    border-top: 1px solid rgba(255,255,255,.1);
}

.sidebar-footer .admin-name {
    font-size: .75rem;
    color: rgba(255,255,255,.5);
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .5rem;
    font-family: 'Roboto', sans-serif;
}

.sidebar-footer .nav-link { color: rgba(255,255,255,.55); font-size: .82rem; }
.sidebar-footer .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }

/* Admin layout */
.admin-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--gris-bg);
}

/* Topbar */
.admin-topbar {
    background: #fff;
    border-bottom: 1px solid var(--gris-borde);
    padding: .9rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
}

.admin-topbar .page-title {
    font-family: 'Gilda Display', serif;
    font-size: 1.1rem;
    font-weight: normal;
    color: var(--lodge-dark);
    margin: 0;
    line-height: 1.2;
    letter-spacing: .02em;
}

.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);
    font-family: 'Roboto', sans-serif;
}

.admin-avatar {
    width: 30px;
    height: 30px;
    background: var(--caramel);
    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: 2px;
    border: 1px solid var(--gris-borde);
    padding: 1.2rem 1.3rem;
    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: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.stat-icon.ic-granate { background: rgba(193,155,118,.12); color: var(--caramel); }
.stat-icon.ic-warning { background: rgba(255,153,0,.12);   color: #cc7700; }
.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-family: 'Gilda Display', serif;
    font-size: 1.8rem;
    font-weight: normal;
    line-height: 1;
    color: var(--lodge-dark);
}

.stat-label { font-size: .73rem; color: var(--texto-muted); margin-top: 3px; }
.stat-link  { font-size: .7rem; color: var(--caramel); text-decoration: none; }
.stat-link:hover { text-decoration: underline; }

/* Card styles */
.card { border-radius: 2px; }

.card-header {
    background: #fff;
    border-bottom: 1px solid var(--gris-borde);
    font-size: .88rem;
    padding: .85rem 1rem;
    font-family: 'Roboto', sans-serif;
}

.card-header.ch-garnet { border-left: 3px solid var(--caramel); }

/* Buttons — caramel como primario */
.btn-primary            { background-color: var(--caramel); border-color: var(--caramel); }
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus      { background-color: var(--caramel-dark); border-color: var(--caramel-dark); }
.btn-outline-primary    { color: var(--caramel); border-color: var(--caramel); }
.btn-outline-primary:hover { background: var(--caramel); border-color: var(--caramel); color: #fff; }

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

/* Table */
.table-light th {
    background: var(--gris-bg) !important;
    color: var(--lodge-dark);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: 'Roboto', sans-serif;
}

.table-hover tbody tr:hover td { background: rgba(193,155,118,.05); }

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