:root {
    --azul: #1d4e89;
    --azul-osc: #123456;
    --gris-bg: #f4f6f8;
    --gris-borde: #dfe3e8;
    --texto: #24313f;
    --rojo: #b3261e;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--gris-bg);
    color: var(--texto);
}

a { color: var(--azul); text-decoration: none; }

.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: 220px;
    background: var(--azul-osc);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
}

.sidebar .marca {
    font-size: 1.3rem;
    font-weight: 700;
    padding: 0 20px 20px;
}

.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.sidebar nav a {
    color: #cfd8e3;
    padding: 10px 20px;
}

.sidebar nav a.activo {
    background: var(--azul);
    color: #fff;
    font-weight: 600;
}

.sidebar nav a.deshabilitado {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.usuario-caja {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.15);
    font-size: 0.85rem;
}

.usuario-rol { text-transform: uppercase; font-size: 0.7rem; opacity: 0.7; }

.salir { display: inline-block; margin-top: 8px; color: #ffb4ab; }

.contenido { flex: 1; padding: 32px 40px; }

.contenido-solo {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subtitulo { color: #5a6b7a; margin-top: -6px; }

.tarjetas { display: flex; gap: 20px; margin-top: 24px; flex-wrap: wrap; }

.tarjeta {
    background: #fff;
    border: 1px solid var(--gris-borde);
    border-radius: 10px;
    padding: 20px 28px;
    min-width: 160px;
}

.tarjeta-numero { font-size: 2rem; font-weight: 700; color: var(--azul); }

.tarjeta-etiqueta { color: #5a6b7a; font-size: 0.9rem; margin-top: 4px; }

.nota { margin-top: 32px; color: #8592a0; font-size: 0.9rem; }

.login-caja {
    background: #fff;
    border: 1px solid var(--gris-borde);
    border-radius: 12px;
    padding: 40px;
    width: 340px;
}

.login-caja h1 { margin: 0 0 4px; }

.login-caja form { display: flex; flex-direction: column; margin-top: 20px; }

.login-caja label { font-size: 0.85rem; margin-top: 12px; margin-bottom: 4px; color: #5a6b7a; }

.login-caja input {
    padding: 10px 12px;
    border: 1px solid var(--gris-borde);
    border-radius: 6px;
    font-size: 1rem;
}

.login-caja button {
    margin-top: 24px;
    padding: 12px;
    background: var(--azul);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
}

.login-caja button:hover { background: var(--azul-osc); }

.alerta-error {
    background: #fdecea;
    color: var(--rojo);
    padding: 10px 14px;
    border-radius: 6px;
    margin-top: 16px;
    font-size: 0.9rem;
}

/* --- Filtros / formularios de búsqueda --- */
.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
    margin: 20px 0;
}

.filtros input,
.filtros select {
    padding: 8px 10px;
    border: 1px solid var(--gris-borde);
    border-radius: 6px;
    font-size: 0.9rem;
}

.filtros label {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
    color: #5a6b7a;
    gap: 4px;
}

.filtros button {
    padding: 8px 16px;
    background: var(--azul);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
}

.filtros button:hover { background: var(--azul-osc); }

/* --- Tablas --- */
.tabla-scroll { overflow-x: auto; margin-top: 12px; }

.tabla {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 0.9rem;
}

.tabla th,
.tabla td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--gris-borde);
    text-align: left;
    white-space: nowrap;
}

.tabla thead th {
    background: var(--gris-bg);
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #5a6b7a;
}

.tabla tbody tr:hover { background: #f9fbfc; }

.fila-sin-registro { opacity: 0.7; }

/* --- Badges de estatus --- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #e3e8ee;
    color: var(--texto);
}

.badge-alerta { background: #fdecea; color: var(--rojo); }
.badge-terminada,
.badge-entregada,
.badge-finalizada { background: #e3f4e9; color: #1e7a3d; }
.badge-ingresada,
.badge-en-proceso,
.badge-proceso { background: #fff4e0; color: #a0650f; }
.badge-cancelada,
.badge-anulada { background: #f0f1f3; color: #6a7480; }

/* --- Paginación --- */
.paginacion { display: flex; gap: 6px; margin-top: 20px; flex-wrap: wrap; }
.paginacion a,
.paginacion .pagina-actual {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--gris-borde);
    font-size: 0.85rem;
}
.paginacion .pagina-actual { background: var(--azul); color: #fff; border-color: var(--azul); }
.paginacion a:hover { background: var(--gris-bg); }

/* --- Ficha de datos (orden / bus) --- */
.ficha-datos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    background: #fff;
    border: 1px solid var(--gris-borde);
    border-radius: 10px;
    padding: 20px;
    margin-top: 16px;
}

.ficha-datos > div { display: flex; flex-direction: column; gap: 2px; }
.etiqueta { font-size: 0.72rem; text-transform: uppercase; color: #8592a0; }

.observaciones { margin-top: 16px; background: #fff; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--gris-borde); }

/* --- Galería de fotos --- */
.galeria { display: flex; flex-direction: column; gap: 8px; }
.galeria-grupo { display: flex; flex-direction: column; gap: 4px; }
.galeria-etiqueta { font-size: 0.7rem; text-transform: uppercase; color: #8592a0; }
.galeria-fotos { display: flex; gap: 6px; flex-wrap: wrap; }
.miniatura {
    display: inline-block;
    width: 56px;
    height: 56px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--gris-borde);
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.muted { color: #8592a0; font-size: 0.85rem; }

/* --- Tabs de catálogos --- */
.tabs { display: flex; gap: 4px; margin-top: 16px; border-bottom: 1px solid var(--gris-borde); }
.tab {
    padding: 10px 18px;
    color: #5a6b7a;
    border-bottom: 2px solid transparent;
    font-size: 0.9rem;
}
.tab-activo { color: var(--azul); border-bottom-color: var(--azul); font-weight: 600; }