/* ===========================================================================
   NexoFem · Escala MRS - Estilos del panel administrativo (paleta de marca)
   Morado #772b95 · Naranja #ff9300 · Marino #131e30
   =========================================================================== */

body.admin { background: #f4ecfa; }

.admin-top {
    display: flex; align-items: center; gap: 20px;
    background: linear-gradient(135deg, #772b95 0%, #ff9300 100%); color: #fff; padding: 12px 22px;
    flex-wrap: wrap;
}
.admin-top__marca { font-weight: 700; letter-spacing: .5px; display: flex; align-items: center; gap: 9px; }
.admin-top__marca img { height: 26px; width: auto; display: block; }
.admin-nav { display: flex; gap: 6px; flex: 1; }
.admin-nav a {
    color: #fff; text-decoration: none; padding: 8px 14px; border-radius: 8px;
    opacity: .85;
}
.admin-nav a:hover { background: rgba(255,255,255,.14); opacity: 1; }
.admin-nav a.is-activo { background: rgba(255,255,255,.24); opacity: 1; font-weight: 700; }
.admin-top__user { display: flex; align-items: center; gap: 12px; font-size: .9rem; }
.btn-salir {
    background: #ff9300; color: #131e30; text-decoration: none;
    padding: 7px 14px; border-radius: 8px; font-weight: 700;
}
.btn-salir:hover { background: #e5881c; }

.admin-main { max-width: 1180px; margin: 22px auto; padding: 0 18px; }
.admin-h1 { color: #772b95; margin: 0 0 18px; }

/* Tarjetas KPI */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 24px; }
.kpi { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 2px 10px rgba(119,43,149,.10); }
.kpi__num { font-size: 2rem; font-weight: 700; color: #772b95; }
.kpi__lbl { color: #5a5366; font-size: .85rem; }

/* Paneles / graficos */
.panel { background: #fff; border-radius: 12px; padding: 18px; box-shadow: 0 2px 10px rgba(119,43,149,.10); margin-bottom: 20px; }
.panel__tit { margin: 0 0 12px; color: #772b95; font-size: 1.05rem; }
.graficos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.grafico-box { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 2px 10px rgba(119,43,149,.10); }
.grafico-box h3 { margin: 0 0 10px; font-size: .98rem; color: #772b95; }
.grafico-box canvas { max-height: 300px; }

/* Filtros */
.filtros { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 2px 10px rgba(119,43,149,.10); margin-bottom: 18px; }
.filtros__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.filtros label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: #5a5366; font-weight: 600; }
.filtros input, .filtros select {
    padding: 8px; border: 1.5px solid #e3d4ee; border-radius: 7px; font-size: .9rem;
}
.filtros__acciones { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.btn-mini { border: 0; border-radius: 8px; padding: 9px 16px; font-weight: 700; cursor: pointer; text-decoration: none; font-size: .9rem; }
.btn-mini--p { background: #772b95; color: #fff; }
.btn-mini--s { background: #fff; color: #772b95; border: 1.5px solid #772b95; }
.btn-mini--x { background: #ea4d13; color: #fff; }
.btn-mini--g { background: #1e8a5a; color: #fff; }

/* Tabla */
.tabla-wrap { overflow-x: auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(119,43,149,.10); }
table.tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.tabla th { background: #772b95; color: #fff; padding: 10px; text-align: left; white-space: nowrap; }
table.tabla td { padding: 9px 10px; border-bottom: 1px solid #efe4f6; }
table.tabla tr:nth-child(even) td { background: #faf6fd; }
table.tabla a { color: #772b95; font-weight: 600; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.badge--si { background: #d4f3e3; color: #1e8a5a; }
.badge--no { background: #f6e3ec; color: #b25; }
.badge--preview { background: #fff0d6; color: #a5680f; }
.badge--enviado { background: #d4f3e3; color: #1e8a5a; }
.badge--error { background: #fdecea; color: #c0392b; }

/* Paginacion */
.paginacion { display: flex; gap: 6px; justify-content: center; margin: 18px 0; flex-wrap: wrap; }
.paginacion a, .paginacion span {
    padding: 8px 13px; border-radius: 8px; text-decoration: none; background: #fff; color: #772b95;
    border: 1.5px solid #e3d4ee;
}
.paginacion .actual { background: #772b95; color: #fff; border-color: #772b95; }

/* Detalle */
.detalle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 16px; }
.det-card { background:#fff; border-radius:12px; padding:16px; box-shadow:0 2px 10px rgba(119,43,149,.10); }
.det-card h3 { margin:0 0 10px; color:#772b95; font-size:1rem; }
.det-card table { width:100%; border-collapse:collapse; }
.det-card td { padding:4px 6px; vertical-align:top; }
.det-card td.k { color:#5a5366; width:42%; }

/* Login */
.login-wrap { max-width: 380px; margin: 8vh auto; }
.login-card { background:#fff; border-radius:14px; padding:28px; box-shadow:0 6px 24px rgba(119,43,149,.18); }
.login-card h1 { color:#772b95; text-align:center; letter-spacing:2px; margin:0 0 4px; }
.login-card p.sub { text-align:center; color:#5a5366; margin:0 0 18px; }
.login-card .campo { margin-bottom: 14px; }
.login-error { background:#fdecea; border:1px solid #c0392b; color:#c0392b; padding:10px; border-radius:8px; margin-bottom:14px; }

/* Acciones por fila y en lote */
.acciones-lote { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.celda-acciones { white-space: nowrap; }
.celda-acciones .accion-link,
.celda-acciones .form-fila { display: inline-block; vertical-align: middle; margin: 0 2px; }
.accion-link { color: #772b95; font-weight: 600; }
.accion-btn {
    border: 0; border-radius: 6px; padding: 5px 10px; font-weight: 700; cursor: pointer;
    font-size: .78rem; color: #fff;
}
.accion-btn--g { background: #1e8a5a; }
.accion-btn--x { background: #ea4d13; }

/* Zona peligrosa: restablecer todo */
.zona-peligro {
    margin-top: 30px; padding: 18px; border: 2px dashed var(--error, #c0392b);
    border-radius: 12px; background: #fdecea;
}
.zona-peligro__tit { margin: 0 0 6px; color: var(--error, #c0392b); font-size: 1.05rem; }
.zona-peligro__txt { margin: 0 0 12px; color: #7a2d24; font-size: .9rem; }
.btn-reset {
    border: 0; border-radius: 8px; padding: 10px 18px; font-weight: 800; cursor: pointer;
    font-size: .92rem; background: var(--error, #c0392b); color: #fff;
}
.btn-reset:disabled { opacity: .5; cursor: not-allowed; }

/* Modal de confirmacion */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(30, 12, 40, .55);
    display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px;
}
.modal-overlay[hidden] { display: none; }
.modal-caja {
    background: #fff; border-radius: 14px; padding: 24px; max-width: 480px; width: 100%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}
.modal-tit { margin: 0 0 12px; color: var(--error, #c0392b); }
.modal-lista { margin: 0 0 12px; padding-left: 20px; }
.modal-aviso { color: var(--error, #c0392b); }
.modal-acciones { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.reset-input {
    width: 100%; padding: 10px; border: 1.5px solid var(--error, #c0392b); border-radius: 8px;
    font-size: 1rem; letter-spacing: 1px; text-align: center; font-weight: 700;
}

@media (max-width: 640px) {
    .admin-top { flex-direction: column; align-items: flex-start; gap: 10px; }
    .admin-nav { width: 100%; }
}