/* =========================================================
   PORKY – TEMA MODERNO RESTAURANTE (RED EDITION)
   AdminLTE + Bootstrap 4 + Livewire
   ========================================================= */

/* ---------------------------------------------------------
   1. VARIABLES DE MARCA
--------------------------------------------------------- */
:root {
    --brand-dark: #140a0a;
    --brand-navy: #2a0f0f;

    --brand-primary: #c62828;
    --brand-primary-dark: #8e0000;
    --brand-secondary: #e53935;

    --brand-success: #6d4c41;

    --brand-light: #fff5f5;
    --brand-light-alt: #fbe9e7;

    --brand-border: #f1d2bd;
}

/* ---------------------------------------------------------
   2. BASE
--------------------------------------------------------- */
body {
    background: linear-gradient(to bottom, #fff5f5, #fbe9e7);
    font-size: 0.9rem;
}

/* Scroll */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-thumb {
    background: var(--brand-primary);
    border-radius: 4px;
}

/* ---------------------------------------------------------
   3. NAVBAR
--------------------------------------------------------- */
.main-header.navbar {
    background: linear-gradient(90deg, var(--brand-dark), var(--brand-primary)) !important;
    border: none;
}

.main-header .nav-link {
    color: #fff !important;
}

.main-header .nav-link:hover {
    background: rgba(255,255,255,0.08);
    border-radius: 6px;
}

/* ---------------------------------------------------------
   4. SIDEBAR
--------------------------------------------------------- */

/* CONTENEDOR */
.main-sidebar {
    background-color: var(--brand-navy) !important;
}

/* LINKS */
.nav-sidebar .nav-link {
    color: var(--brand-light) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* HOVER */
.nav-sidebar .nav-link:hover {
    background-color: var(--brand-primary) !important;
    color: var(--brand-light) !important;
}

/* ACTIVO */
.nav-sidebar .nav-link.active {
    background-color: var(--brand-secondary) !important;
    color: #fff !important;
    font-weight: 600;
}

/* ICONOS */
.nav-sidebar .nav-icon {
    color: #f1c1b5 !important; /* tono cálido Porky */
    transition: color 0.2s ease;
}

/* ICONOS EN HOVER */
.nav-sidebar .nav-link:hover .nav-icon,
.nav-sidebar .nav-link.active .nav-icon {
    color: #fff !important;
}

/* ---------------------------------------------------------
   5. CONTENIDO
--------------------------------------------------------- */
.content-wrapper {
    background-color: var(--brand-light);
}

/* ---------------------------------------------------------
   6. CARDS
--------------------------------------------------------- */
.card {
    border-radius: 12px;
    border: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.card-header {
    background: linear-gradient(90deg, var(--brand-secondary), var(--brand-primary));
    color: #fff;
    font-weight: 600;
    border: none;
}

/* ---------------------------------------------------------
   7. MODALES
--------------------------------------------------------- */
.modal-content {
    border-radius: 12px;
    border: none !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.3);
}

.modal-header {
    background: linear-gradient(90deg, var(--brand-dark), var(--brand-primary));
    color: #fff;
    border: none;
}

.modal-body {
    background-color: var(--brand-light);
}

.modal-footer {
    background-color: var(--brand-light-alt);
}

/* ---------------------------------------------------------
   8. BOTONES
--------------------------------------------------------- */
.btn {
    border-radius: 6px;
    font-size: 0.85rem;
}

/* Primario */
.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-primary:hover {
    background-color: var(--brand-primary-dark);
}

/* Secundario */
.btn-secondary {
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    color: #fff;
}

/* Éxito */
.btn-success {
    background-color: var(--brand-success);
}

/* Peligro */
.btn-danger {
    background-color: #b71c1c;
}

/* Acciones pequeñas */
.table-actions .btn {
    padding: 0.25rem 0.45rem;
    border-radius: 6px;
}

/* ---------------------------------------------------------
   9. FORMULARIOS
--------------------------------------------------------- */
.form-control {
    border-radius: 6px;
    border: 1px solid var(--brand-border);
}

.form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.1rem rgba(198,40,40,0.25);
}

/* ---------------------------------------------------------
   10. TABLAS
--------------------------------------------------------- */
.table {
    font-size: 0.9rem;
}

.table thead th {
    background-color: var(--brand-navy);
    color: #fff;
    border: none;
}

.table tbody tr {
    transition: all .15s ease;
}

.table tbody tr:hover {
    background-color: #fff0f0;
}

.table td {
    border-top: 1px solid var(--brand-border);
}

/* ---------------------------------------------------------
   11. BADGES (OPERACIÓN)
--------------------------------------------------------- */
.badge {
    font-size: 0.75rem;
    border-radius: 4px;
    padding: 0.35em 0.6em;
}

/* Estados */
.badge-pending {
    background-color: #ff9800;
}

.badge-cooking {
    background-color: var(--brand-secondary);
}

.badge-ready {
    background-color: #43a047;
}

.badge-delivered {
    background-color: var(--brand-success);
}

/* ---------------------------------------------------------
   12. PAGINACIÓN
--------------------------------------------------------- */
.pagination .page-link {
    color: var(--brand-primary);
}

.pagination .page-item.active .page-link {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* ---------------------------------------------------------
   13. BUSCADOR
--------------------------------------------------------- */
input[type="search"] {
    border-radius: 6px;
    border: 1px solid var(--brand-border);
    padding: 0.4rem 0.6rem;
}

input[type="search"]:focus {
    border-color: var(--brand-primary);
}

/* ---------------------------------------------------------
   14. RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem;
    }
}

/* =====================================================
   BOTONES DE ACCIÓN – PORKY (VISIBILIDAD ALTA)
   ===================================================== */

/* Contenedor */
.table-actions .btn {
    border-radius: 6px;
    padding: 0.35rem 0.55rem;
    font-size: 0.8rem;
    border: none;
    transition: all 0.15s ease;
}

/* EDITAR */
.btn-edit {
    background-color: #ff7043; /* naranja suave para contraste */
    color: #fff;
}

.btn-edit:hover {
    background-color: #e64a19;
    transform: translateY(-1px);
}

/* ELIMINAR */
.btn-delete {
    background-color: #b71c1c;
    color: #fff;
}

.btn-delete:hover {
    background-color: #7f0000;
    transform: translateY(-1px);
}

/* ICONOS */
.table-actions i {
    font-size: 0.85rem;
}

/* BOTÓN CREAR */
.btn-create {
    background: linear-gradient(90deg, #c62828, #e53935);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.45rem 0.75rem;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(198,40,40,.25);
}

.btn-create:hover {
    background: linear-gradient(90deg, #8e0000, #c62828);
    transform: translateY(-1px);
}

/* =====================================================
   BOTONES CEF – PORKY (GASTRONÓMICO PRO)
   ===================================================== */

/* Base */
.btn-cef {
    border-radius: 10px;
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
    border: none;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ICONOS */
.btn-cef i {
    font-size: 0.85rem;
}

/* =========================
   CREAR (DESTACADO PERO DIFERENTE AL HEADER)
========================= */
.btn-cef-create {
    background: linear-gradient(135deg, #ff7043, #d84315);
    color: #fff;
    box-shadow: 0 4px 12px rgba(216,67,21,.35);
}

.btn-cef-create:hover {
    background: linear-gradient(135deg, #e64a19, #bf360c);
    transform: translateY(-2px) scale(1.03);
}

/* =========================
   EDITAR (MARRÓN PREMIUM)
========================= */
.btn-cef-edit {
    background: linear-gradient(135deg, #6d4c41, #4e342e);
    color: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,.25);
}

.btn-cef-edit:hover {
    background: linear-gradient(135deg, #5d4037, #3e2723);
    transform: translateY(-2px);
}

/* =========================
   ELIMINAR (ROJO PROFUNDO)
========================= */
.btn-cef-delete {
    background: linear-gradient(135deg, #c62828, #8e0000);
    color: #fff;
    box-shadow: 0 3px 8px rgba(198,40,40,.35);
}

.btn-cef-delete:hover {
    background: linear-gradient(135deg, #b71c1c, #5f0000);
    transform: translateY(-2px);
}

/* =========================
   GRUPO
========================= */
.btn-group .btn-cef {
    margin: 0 3px;
}

/* HOVER GLOBAL */
.btn-cef:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

/* DISABLED */
.btn-cef:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* =========================
   PRODUCTOS
========================= */
.product-card-pro {
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.25s ease;
    background: #fff;
}
.product-card-pro:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

/* =========================
   IMAGEN PRODUCTO
========================= */
.product-img-wrapper {
    position: relative;
    width: 120px;
    min-width: 120px;
    height: 120px;
}
.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px 0 0 12px;
}

/* =========================
   BOTÓN VER
========================= */
.btn-view {
    position: absolute;
    bottom: 5px;
    right: 5px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    opacity: 0;
    transition: 0.2s;
}
.product-card-pro:hover .btn-view {
    opacity: 1;
}

/* =========================
   CONTADOR PRODUCTO
========================= */
.qty-control {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 20px;
    padding: 2px;
}
.qty-control button {
    border: none;
    background: #dc3545;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}
.qty-control span {
    width: 30px;
    text-align: center;
    font-weight: bold;
}

/* =========================
   CART SIDEBAR
========================= */

/* OVERLAY */
.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1040;
}

/* SIDEBAR */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    height: 100%;
    background: #fff;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0 20px rgba(0,0,0,.2);
    animation: slideIn .3s ease;
    transition: transform 0.3s ease;
}

.cart-sidebar.closing {
    transform: translateX(100%);
}

@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* HEADER */
.cart-header {
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
}

/* BODY */
.cart-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

/* ITEM */
.cart-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.cart-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
}

/* QTY SIDEBAR */
.qty-control-modern {
    display: flex;
    align-items: center;
}
.qty-control-modern button {
    border: none;
    background: #eee;
    padding: 4px 8px;
    margin: 0 3px;
}

/* FOOTER */
.cart-footer {
    padding: 15px;
    border-top: 1px solid #eee;
}

/* =========================
   FLOATING CART BUTTON
========================= */
.cart-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1100;
    cursor: pointer;

    animation: fadeInUp .4s ease;
}

.cart-fab-content {
    background: #dc3545;
    color: #fff;
    padding: 12px 18px;
    border-radius: 50px;
    font-weight: bold;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);

    display: flex;
    align-items: center;
    gap: 5px;

    transition: all .2s ease;
}

.cart-fab-content:hover {
    transform: scale(1.05);
}

.cart-fab.hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-modal-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
}

/* =========================================================
   FIX ADMINLTE SIDEBAR (FORZAR ESTILOS)
========================================================= */

/* BASE */
.sidebar-dark-primary .nav-sidebar .nav-link {
    color: var(--brand-light) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* HOVER */
.sidebar-dark-primary .nav-sidebar .nav-link:hover {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* ACTIVO */
.sidebar-dark-primary .nav-sidebar .nav-link.active {
    background-color: var(--brand-secondary) !important;
    color: #fff !important;
    font-weight: 600;
}

/* ICONOS */
.sidebar-dark-primary .nav-sidebar .nav-icon {
    color: #f1c1b5 !important;
}

/* ICONOS HOVER / ACTIVO */
.sidebar-dark-primary .nav-sidebar .nav-link:hover .nav-icon,
.sidebar-dark-primary .nav-sidebar .nav-link.active .nav-icon {
    color: #fff !important;
}

/* =====================================================
   ACTION BUTTONS – PORKY STYLE (ALINEADO AL TEMA)
   ===================================================== */

.action-group .action-btn {
    border-radius: 10px;
    margin-right: 4px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease;
    border: none;
    color: #fff;
    font-size: 14px;
}

/* 👁️ VER (marrón oscuro elegante) */
.action-view {
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-dark));
}

/* ✏️ EDITAR (usa tu estilo existente) */
.action-edit {
    background: linear-gradient(135deg, #6d4c41, #4e342e);
}

/* 🔄 ESTADO (naranja gastronómico) */
.action-warning {
    background: linear-gradient(135deg, #ff7043, #d84315);
}

/* 🚚 DOMICILIARIO */
.action-info {
    background: linear-gradient(135deg, #43a047, #2e7d32);
}

.action-success {
    background: linear-gradient(135deg, #2e7d32, #1b5e20);
}

/* 💳 PAGO (rojo secundario del sistema) */
.action-payment {
    background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary));
}

/* 🧾 TICKET */
.action-dark {
    background: linear-gradient(135deg, #424242, #212121);
}

/* ❌ ELIMINAR */
.action-danger {
    background: linear-gradient(135deg, #c62828, #8e0000);
}

/* ✨ HOVER GLOBAL */
.action-btn:hover {
    transform: translateY(-2px) scale(1.05);
    filter: brightness(1.08);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

/* CLICK */
.action-btn:active {
    transform: scale(0.95);
}

/* GRUPO */
.action-group {
    display: flex;
    align-items: center;
}

/* DROPDOWN */
.dropdown-menu {
    border-radius: 10px;
    padding: 5px;
    border: 1px solid var(--brand-border);
}

/* ITEMS */
.dropdown-item:hover {
    background-color: var(--brand-light-alt);
}