/* ============================================================================
   Portal de pedidos ópticos — sistema visual (POR-011)
   Identidad Freelens (freelens.com.co): azul #004392, acento #1B87EA, grises
   neutros, titulares Montserrat, texto Poppins. Bootstrap 5 debajo; aquí solo
   se sobreescribe lo que hace falta para que parezca de la casa.
   ============================================================================ */

:root {
    --fl-primary: #004392;
    --fl-primary-dark: #002f66;
    --fl-primary-soft: #e6eef8;
    --fl-accent: #1B87EA;
    --fl-accent-soft: #e3f1fd;
    --fl-ink: #1c2a3a;
    --fl-text: #4a5568;
    --fl-muted: #7b8794;
    --fl-bg: #f4f6fa;
    --fl-surface: #ffffff;
    --fl-border: #e1e6ee;
    --fl-success: #1e8e5a;
    --fl-warning: #c77d00;
    --fl-danger: #c0392b;
    --fl-radius: 12px;
    --fl-shadow: 0 1px 2px rgba(16, 32, 64, .06), 0 4px 16px rgba(16, 32, 64, .06);
    --bs-primary: var(--fl-primary);
    --bs-primary-rgb: 0, 67, 146;
    --bs-link-color: var(--fl-primary);
    --bs-link-hover-color: var(--fl-accent);
    --bs-body-color: var(--fl-text);
    --bs-body-bg: var(--fl-bg);
    --bs-border-color: var(--fl-border);
    --bs-font-sans-serif: "Poppins", "Segoe UI", system-ui, sans-serif;
}

html { font-size: 15px; }
body { background: var(--fl-bg); color: var(--fl-text); min-height: 100vh; display: flex; flex-direction: column; font-family: var(--bs-font-sans-serif); }
main { flex: 1 0 auto; }
h1, h2, h3, h4, h5, .fl-titulo { font-family: "Montserrat", "Segoe UI", system-ui, sans-serif; font-weight: 700; color: var(--fl-ink); letter-spacing: -.01em; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
code { color: var(--fl-primary); background: var(--fl-primary-soft); padding: .1em .35em; border-radius: 4px; }

/* ---- Barra superior --------------------------------------------------------- */
.fl-topbar { background: linear-gradient(90deg, var(--fl-primary-dark), var(--fl-primary) 60%, #0a58b8); color: #fff; }
.fl-topbar .navbar { padding: .55rem 0; }
.fl-topbar .navbar-brand img { height: 38px; width: auto; display: block; }
.fl-topbar .nav-link { color: rgba(255,255,255,.82); font-weight: 500; padding: .5rem .9rem; border-radius: 8px; }
.fl-topbar .nav-link:hover, .fl-topbar .nav-link.active { color: #fff; background: rgba(255,255,255,.12); text-decoration: none; }
.fl-topbar .nav-link.fl-cta { background: var(--fl-accent); color: #fff; }
.fl-topbar .nav-link.fl-cta:hover { background: #1477d0; }
.fl-usuario { display: flex; align-items: center; gap: .6rem; color: rgba(255,255,255,.9); font-size: .85rem; line-height: 1.15; }
.fl-usuario .fl-avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; font-family: Montserrat, sans-serif; font-weight: 700; }
.fl-usuario small { color: rgba(255,255,255,.65); display: block; }
.fl-topbar .btn-salir { color: #fff; border-color: rgba(255,255,255,.45); }
.fl-topbar .btn-salir:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }

/* ---- Cabecera de página ------------------------------------------------------ */
.fl-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 1.75rem 0 1.25rem; }
.fl-page-header h1 { font-size: 1.6rem; margin: 0; }
.fl-page-header .fl-sub { color: var(--fl-muted); font-size: .9rem; margin-top: .15rem; }
.fl-kicker { font-family: Montserrat, sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fl-accent); }

/* ---- Tarjetas ----------------------------------------------------------------- */
.card { border: 1px solid var(--fl-border); border-radius: var(--fl-radius); box-shadow: var(--fl-shadow); background: var(--fl-surface); }
.card-header { background: transparent; border-bottom: 1px solid var(--fl-border); padding: .9rem 1.25rem; font-family: Montserrat, sans-serif; font-weight: 700; color: var(--fl-ink); display: flex; align-items: center; gap: .6rem; }
.card-header .fl-paso { width: 26px; height: 26px; border-radius: 50%; background: var(--fl-primary); color: #fff; font-size: .8rem; display: grid; place-items: center; flex: 0 0 auto; }
.card-body { padding: 1.25rem; }

/* ---- Formularios --------------------------------------------------------------- */
.form-label { font-size: .78rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--fl-muted); margin-bottom: .3rem; }
.form-label.required::after { content: " *"; color: var(--fl-danger); }
.form-control, .form-select { border-color: var(--fl-border); border-radius: 8px; color: var(--fl-ink); }
.form-control:focus, .form-select:focus { border-color: var(--fl-accent); box-shadow: 0 0 0 .2rem rgba(27, 135, 234, .18); }
.form-control-sm, .form-select-sm { padding: .4rem .6rem; }
.flex-md-root { flex: 1 1 0; min-width: 150px; }
.fl-ayuda { font-size: .8rem; color: var(--fl-muted); }

/* Select2 con el mismo aspecto que los inputs */
.select2-container--default .select2-selection--single { border: 1px solid var(--fl-border); border-radius: 8px; height: calc(1.5em + .8rem + 2px); }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(1.5em + .8rem); font-size: .9rem; color: var(--fl-ink); padding-left: .6rem; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(1.5em + .8rem); }
.select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--fl-accent); box-shadow: 0 0 0 .2rem rgba(27, 135, 234, .18); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--fl-primary); }
.select2-dropdown { border-color: var(--fl-border); border-radius: 8px; box-shadow: var(--fl-shadow); }

/* ---- Botones ------------------------------------------------------------------- */
.btn { border-radius: 8px; font-weight: 500; }
.btn-primary { background: var(--fl-primary); border-color: var(--fl-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--fl-primary-dark); border-color: var(--fl-primary-dark); }
.btn-outline-primary { color: var(--fl-primary); border-color: var(--fl-primary); }
.btn-outline-primary:hover { background: var(--fl-primary); border-color: var(--fl-primary); }
.btn-light { background: #fff; border-color: var(--fl-border); color: var(--fl-ink); }
.btn-light:hover { background: var(--fl-bg); border-color: var(--fl-border); }
.btn-light-danger { color: var(--fl-danger); }
.btn-light-danger:hover { background: #fdecea; color: var(--fl-danger); }

/* ---- Tablas -------------------------------------------------------------------- */
.table { --bs-table-color: var(--fl-ink); margin-bottom: 0; }
.table > thead th { font-family: Montserrat, sans-serif; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fl-muted); background: #f8fafc; border-bottom: 1px solid var(--fl-border); font-weight: 700; white-space: nowrap; }
.table > tbody td { border-color: var(--fl-border); vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background: var(--fl-primary-soft); }
.table-sm > :not(caption) > * > * { padding: .55rem .6rem; }
.fl-tabla-card .table-responsive { border-radius: 0 0 var(--fl-radius) var(--fl-radius); }
#tablaLineas td, #tablaLineas th { white-space: nowrap; font-size: .8rem; }
#tablaOjos th { color: var(--fl-primary); }

/* ---- Estados -------------------------------------------------------------------- */
.fl-estado { display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .7rem; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.fl-estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fl-estado-pendiente { background: #fff4e0; color: var(--fl-warning); }
.fl-estado-proceso { background: var(--fl-accent-soft); color: #0f5ea8; }
.fl-estado-listo { background: #e7f0fb; color: var(--fl-primary); }
.fl-estado-entregado { background: #e4f5ec; color: var(--fl-success); }
.fl-estado-anulado { background: #eef0f3; color: var(--fl-muted); }
.fl-estado-garantia { background: #f1e9fb; color: #6a3fb5; }

/* ---- Línea de tiempo ------------------------------------------------------------- */
.fl-timeline { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--fl-border); }
.fl-timeline li { position: relative; padding: 0 0 1rem 1rem; }
.fl-timeline li::before { content: ""; position: absolute; left: calc(-1.1rem - 6px); top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--fl-accent); box-shadow: 0 0 0 3px #fff; }
.fl-timeline li:first-child::before { background: var(--fl-primary); }
.fl-timeline .fl-cuando { font-size: .78rem; color: var(--fl-muted); }

/* ---- Datos (dl) ------------------------------------------------------------------- */
.fl-datos dt { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fl-muted); }
.fl-datos dd { color: var(--fl-ink); margin-bottom: .6rem; }

/* ---- Vacíos y avisos --------------------------------------------------------------- */
.fl-vacio { text-align: center; padding: 3rem 1rem; color: var(--fl-muted); }
.fl-vacio .fl-vacio-icono { font-size: 2.6rem; color: var(--fl-accent); opacity: .6; }
.alert { border-radius: 10px; border: 1px solid transparent; }
.alert-success { background: #e4f5ec; color: #14663f; border-color: #c4e9d5; }
.alert-danger { background: #fdecea; color: #922b21; border-color: #f5c6c2; }
.alert-info { background: var(--fl-accent-soft); color: #0f4d8a; border-color: #bfdcf7; }
.alert-warning { background: #fff4e0; color: #7a4d00; border-color: #f7dfb5; }

/* ---- Barra de acciones fija (Nuevo pedido) ------------------------------------------ */
.fl-acciones { position: sticky; bottom: 0; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border-top: 1px solid var(--fl-border); padding: .8rem 0; margin-top: 1rem; z-index: 5; }

/* ---- Login --------------------------------------------------------------------------- */
.fl-login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.fl-login-marca { background: radial-gradient(1200px 600px at 20% 10%, #0a58b8 0%, var(--fl-primary) 45%, var(--fl-primary-dark) 100%); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.fl-login-marca img { width: min(340px, 70%); }
.fl-login-marca h2 { color: #fff; font-size: 1.9rem; max-width: 26ch; }
.fl-login-marca p { color: rgba(255,255,255,.78); max-width: 46ch; }
.fl-login-marca .fl-pie { color: rgba(255,255,255,.55); font-size: .8rem; }
.fl-login-form { display: grid; place-items: center; padding: 2rem; }
.fl-login-form .card { width: 100%; max-width: 420px; }
.fl-login-form .fl-marca-movil { display: none; }
@media (max-width: 900px) {
    .fl-login { grid-template-columns: 1fr; }
    .fl-login-marca { display: none; }
    .fl-login-form { background: var(--fl-primary); min-height: 100vh; }
    .fl-login-form .fl-marca-movil { display: block; width: 220px; margin: 0 auto 1.5rem; }
}

/* ---- Pie ------------------------------------------------------------------------------ */
.fl-footer { color: var(--fl-muted); font-size: .8rem; padding: 1.5rem 0; border-top: 1px solid var(--fl-border); margin-top: 2rem; }

/* ---- Impresión del detalle (sustituye al reporte Crystal sam_pedido.rpt) --------------- */
.print-only { display: none; }
@media print {
    header, footer, .no-print, .modal, .fl-footer { display: none !important; }
    .print-only { display: block; }
    body { background: #fff; font-size: 11pt; color: #000; }
    .container { max-width: 100%; }
    .card { border: 1px solid #999; box-shadow: none; break-inside: avoid; margin-bottom: .5rem; }
    .fl-estado { border: 1px solid #333; color: #000 !important; background: #fff !important; }
    .fl-estado::before { display: none; }
    a { text-decoration: none; color: inherit; }
}