:root {
    --bg: #f5f8ff;          /* fondo azul muy suave */
    --card: #ffffff;        /* tarjetas blancas */
    --primary: #3b82f6;
    --primary-hover: #2563eb;
    --text: #0f172a;        /* texto oscuro legible */
    --muted: #64748b;
    --border: #e5e7eb;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
    background: var(--bg);
    color: var(--text);
}

/* CONTENEDOR GENERAL */
.container {
    max-width: 1100px;
    margin: auto;
    padding: 24px;
}

/* CARDS */
.card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;

    box-shadow:
        0 4px 6px rgba(0,0,0,0.05),
        0 10px 15px rgba(0,0,0,0.08);

    transition: transform 0.2s ease,
                box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 15px rgba(0,0,0,0.08),
        0 20px 25px rgba(0,0,0,0.10);
}

.card h2 {
    font-size: 16px;
    margin-bottom: 10px;
}

.card .number {
    font-size: 32px;
    font-weight: bold;
}

/* BOTONES */
button, .btn {
    white-space: nowrap;
    flex-shrink: 0;
    
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    
    box-shadow:
        0 2px 4px rgba(59,130,246,0.15),
        0 6px 12px rgba(59,130,246,0.20);

    transition: all 0.2s ease;
}

button:hover, .btn:hover {
    background: var(--primary-hover);
    
    transform: translateY(-1px);

    box-shadow:
        0 4px 8px rgba(59,130,246,0.20),
        0 10px 20px rgba(59,130,246,0.25);
}

/* INPUTS */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea{
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #ffffff;
    color: var(--text);
    margin-bottom: 12px;
}

.navbar {
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:16px 24px;

    background:#ffffff;
    border-bottom:1px solid #dbeafe;
    
    box-shadow:
        0 1px 3px rgba(0,0,0,0.05);
}

.navbar a {
    color: #000 !important;
    text-decoration:none;
    margin-left:12px;
}

.dashboard-header {
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:24px;
}

.stats-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;

    margin-bottom:24px;
}

.stat-card {
    text-align:center;
}

.stat-number {
    font-size:42px;
    font-weight:bold;
}

.restaurant-card {
    margin-bottom:16px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.quick-actions {
    margin-top: 30px;
    display: flex;
    gap: 15px;
}

.quick-actions a {
    padding: 10px 15px;
    background: #111;
    color: white;
    border-radius: 8px;
    text-decoration: none;
}

.flash {
    margin: 15px auto;
    padding: 12px 16px;
    border-radius: 8px;
    max-width: 1100px;
    font-weight: 500;
}

.flash-success {
    background: #16a34a;
    color: white;
}

.flash-error {
    background: #dc2626;
    color: white;
}

.form-group {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
}

label {
    font-weight: 600;
    color: var(--text);
}

.form-group > label{
    margin-bottom:6px;
}

.form-help {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

.sortable-ghost {
    opacity: 0.3;
    transform: scale(0.98);
}

.sortable-chosen {
    background: #eef2ff;
}

details[open] {
    overflow: visible;
}

.summary-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.summary-actions a,
.summary-actions button {
    cursor: pointer;
}

.summary-actions form {
    display: inline-flex;
    margin: 0;
}

.summary-actions .btn {
    white-space: nowrap;
}

.summary-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.category-summary {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

/* CRÍTICO: reset del comportamiento nativo */
.category-summary::-webkit-details-marker {
    display: none;
}

.category-handle {
    cursor: grab;
    user-select: none;
    font-size:20px;
}

.category-item {
    margin-bottom: 10px;
}

.category-details {
    border: 1px solid var(--border);
    background: white;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
}

.dish-handle {
    cursor: grab;
    font-size: 18px;
    user-select: none;
}

.dish-image {
    width:60px;
    height:60px;
    object-fit:cover;
    border-radius:6px;
}

.dish-price {
    color:#666;
}

.dish-item {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.dish-info {
    display:flex;
    align-items:center;
    gap:10px;
    flex:1;
}

.dish-content {
    display:flex;
    align-items:center;
    gap:10px;
}

.dish-actions {
    display:inline-flex;
    gap:6px;
}

.btn-danger {
    background: #dc2626 !important;
    color: white !important;
}

.btn-danger:hover {
    background: #b91c1c !important;
}

.password-field{
    position:relative;
}

.password-field input{
    width:100%;
    padding-right:45px;
    box-sizing:border-box;
}

.password-field .toggle-password{

    position:absolute;

    top:50%;
    right:12px;

    transform:translateY(-50%);

    width:auto !important;
    height:auto !important;

    display:flex !important;

    align-items:center;
    justify-content:center;

    padding:0;

    margin:0;

    border:none;

    background:transparent;

    cursor:pointer;
}

.password-field .toggle-password img{
    width:22px;
    height:22px;
    opacity:.65;
    transition:opacity .2s;
}

.password-field .toggle-password:hover img{
    opacity:1;
}

.days-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(180px,1fr));
    gap:10px;
    margin-top:10px;
}

.day-item{

    display:flex;
    align-items:center;
    justify-content:flex-start;

    gap:6px;

    padding:10px 12px;

    border:1px solid #e5e7eb;
    border-radius:8px;

    background:#fafafa;

    cursor:pointer;

    margin:0;
}

.day-item input{

    width:16px;
    height:16px;

    margin:0;

    flex:0 0 auto;

    accent-color:#2563eb;
}

.day-item span{

    margin:0;

    line-height:1;

    white-space:nowrap;
}

@media(max-width:900px){

    .days-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:650px){

    .days-grid{
        grid-template-columns:1fr;
    }

}

/* ==========================================================
   BADGES
========================================================== */

.badge{

    display:inline-block;

    padding:3px 10px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;

    line-height:1.3;

    color:#fff;

}

.badge-success{

    background:#198754;

}

.badge-danger{

    background:#dc3545;

}

.badge-warning{

    background:#ffc107;

    color:#212529;

}

.badge-primary{

    background:#0d6efd;

}

.badge-info{

    background:#0dcaf0;

    color:#212529;

}

.badge-secondary{

    background:#6c757d;

}

.badge-dark{

    background:#212529;

}

/* ==========================================================
   STATISTICS DASHBOARD
========================================================== */


.statistics-chart {

    width:100% !important;
    max-height:350px;

}

/* ==========================================================
   COMPONENTES REUTILIZABLES
========================================================== */

.page-header{

    margin-bottom:32px;

}

.page-title{

    margin:0;

    font-size:34px;

    font-weight:700;

}

.page-description{

    margin-top:8px;

    color:var(--muted);

    font-size:15px;

}

.section-title{

    margin:0 0 18px;

    font-size:22px;

    font-weight:700;

}

.card-actions{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-top:18px;

}

.action-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    margin-top:24px;

}

.action-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    text-decoration:none;

    color:inherit;

    min-height:140px;

}

.action-card:hover{

    text-decoration:none;

}

.action-icon{

    font-size:42px;

    margin-bottom:14px;

}

.action-title{

    font-size:18px;

    font-weight:600;

}

.empty-state{

    text-align:center;

    padding:60px 30px;

    color:var(--muted);

}

.empty-state h2{

    margin-bottom:10px;

}

/* ==========================================================
   LANDING PAGE
========================================================== */


.landing-navbar{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:20px 24px;

    background:#ffffff;

    border-bottom:1px solid var(--border);

}


.landing-logo{

    font-size:24px;
    font-weight:700;

}


.landing-links{

    display:flex;
    align-items:center;

    gap:18px;

}


.landing-links a{

    text-decoration:none;

    color:var(--text);

    font-weight:500;

}


.landing-links .btn{

    color:#ffffff;

}


/* HERO */

.landing-hero{

    padding:80px 24px;

    text-align:center;

}


.hero-content{

    max-width:800px;

    margin:auto;

}


.hero-content h1{

    font-size:48px;

    line-height:1.15;

    margin-bottom:20px;

}


.hero-content p{

    font-size:20px;

    color:var(--muted);

    line-height:1.6;

}


.hero-actions{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:35px;

}


.btn-secondary{

    background:#64748b;

}


.btn-secondary:hover{

    background:#475569;

}


/* SECCIONES */

.landing-section{

    max-width:1100px;

    margin:0 auto;

    padding:60px 24px;

}


.landing-section > h2{

    text-align:center;

    font-size:32px;

    margin-bottom:40px;

}


/* GRID */

.landing-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:20px;

}


.landing-card{

    text-align:center;

}


.landing-card h3{

    margin-bottom:15px;

}


.landing-card p{

    color:var(--muted);

    line-height:1.5;

}


/* PLANES */

.pricing-grid{

    align-items:stretch;

}


.pricing-grid .landing-card{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

}


.price{

    font-size:32px;

    font-weight:700;

    color:var(--primary);

}


.featured{

    border:2px solid var(--primary);

    transform:translateY(-8px);

}

.plan-highlight{

    display:inline-block;

    margin:0 auto 10px;

    padding:5px 14px;

    border-radius:999px;

    background:var(--primary);

    color:#ffffff !important;

    font-size:12px;

    font-weight:600;

    line-height:1.4;

}


/* CTA */

.landing-cta{

    text-align:center;

    padding:70px 24px;

    background:#ffffff;

    margin-top:40px;

}


.landing-cta h2{

    font-size:32px;

    margin-bottom:25px;

}


/* RESPONSIVE */

@media(max-width:700px){


    .landing-navbar{

        flex-direction:column;

        gap:20px;

    }


    .landing-links{

        flex-wrap:wrap;

        justify-content:center;

    }


    .hero-content h1{

        font-size:34px;

    }


    .hero-content p{

        font-size:17px;

    }


    .hero-actions{

        flex-direction:column;

        align-items:center;

    }


    .featured{

        transform:none;

    }

}

.plan-features{

    list-style:none;

    padding:0;

    margin:20px 0 0;

    text-align:left;

    width:100%;

}


.plan-features li{

    margin-bottom:10px;

    color:var(--muted);

    text-align:left;

}