@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap");

:root {
    --phe-bg: #f5f3ff;
    --phe-primary: #7c3aed;
    --phe-primary-soft: #ede9fe;
    --phe-primary-dark: #5b21b6;
    --phe-border: #e2e8f0;
    --phe-text: #111827;
    --phe-muted: #6b7280;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    background: var(--phe-bg);
    font-family: "Montserrat", system-ui, sans-serif;
    color: var(--phe-text);
    min-height: 100vh;
    padding: 28px 0 44px;
}

.container-fluid { max-width: 1400px; margin: 0 auto; padding: 0 16px; }
.row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
[class^="col-"], [class*=" col-"] { padding: 0 8px; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-6  { flex: 0 0 50%; max-width: 50%; }
@media (min-width: 768px) {
    .col-md-2 { flex: 0 0 16.666%; max-width: 16.666%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-7 { flex: 0 0 58.333%; max-width: 58.333%; }
}
@media (min-width: 992px) {
    .col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-lg-8 { flex: 0 0 66.666%; max-width: 66.666%; }
}

.mb-0{margin-bottom:0!important} .mb-2{margin-bottom:.5rem!important}
.mb-3{margin-bottom:1rem!important} .mb-4{margin-bottom:1.5rem!important}
.mt-2{margin-top:.5rem!important} .mt-3{margin-top:1rem!important}
.py-4{padding-top:1.5rem;padding-bottom:1.5rem}
.w-100{width:100%} .hidden{display:none!important}
.d-flex{display:flex} .justify-content-between{justify-content:space-between}
.align-items-center{align-items:center} .align-items-end{align-items:flex-end}
.text-center{text-align:center} .text-muted{color:var(--phe-muted)}
.text-dark{color:#111827} .text-white{color:#fff}

.card {
    border-radius: 16px;
    border: 1px solid var(--phe-border);
    background: #fff;
    box-shadow: 0 4px 16px rgba(15,23,42,.06);
}
.card-header { padding: 1rem 1.25rem; border-radius: 16px 16px 0 0; font-weight: 600; }
.card-body { padding: 1.25rem; }
.card-title { color: #0f172a; font-weight: 700; }

.panel-header-purple { background: var(--phe-primary); color: #fff; }
.panel-header-dark { background: #1f2937; color: #fff; }
.panel-header-purple h5, .panel-header-dark h5 { font-size: .96rem; }

.form-label { display:block; margin-bottom:.25rem; font-size:.85rem; font-weight:600; color:#475569; }
.form-select, .form-control {
    width: 100%; border-radius: 8px; border: 1px solid var(--phe-border);
    padding: .65rem .75rem; font-size: .95rem; background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.form-control-lg { padding: .8rem .9rem; font-size: 1rem; }
.form-select:focus, .form-control:focus {
    outline: none; border-color: var(--phe-primary);
    box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    border-radius: 8px; font-weight: 500; border: 1px solid transparent;
    padding: .5rem 1rem; font-size: .9rem; cursor: pointer;
    transition: transform .2s, box-shadow .2s, background .2s;
}
.btn:hover { box-shadow: 0 4px 10px rgba(15,23,42,.15); }
.btn-purple { background: var(--phe-primary); color: #fff; border-color: var(--phe-primary); }
.btn-purple:hover { background: var(--phe-primary-dark); }
.btn-success { background: #22c55e; color: #fff; border-color: #22c55e; }
.btn-danger  { background: #ef4444; color: #fff; border-color: #ef4444; }
.btn-delete  { padding: .25rem .5rem; font-size: .8rem; background: transparent;
               border: none; color: #9ca3af; cursor: pointer; }
.btn-delete:hover { color: #ef4444; }

.alert { border-radius: 10px; border: none; padding: .75rem .9rem; background: #f9fafb; }
.alert-info { background: #f5f3ff; color: #4c1d95; border: 1px solid #ddd6fe; }
.alert-light { background: #f9fafb; }

.badge { display:inline-flex; align-items:center; justify-content:center;
         border-radius:999px; padding:.25rem .6rem; font-size:.75rem; font-weight:600; }
.bg-danger{background:#dc2626;color:#fff} .bg-warning{background:#f59e0b;color:#fff}
.bg-success{background:#22c55e;color:#fff} .bg-primary{background:var(--phe-primary);color:#fff}
.bg-light{background:#f8fafc;color:#1f2937} .bg-purple{background:var(--phe-primary);color:#fff}

.progress { width:100%; border-radius:999px; background:#e8edf5; overflow:hidden;
            box-shadow: inset 0 1px 3px rgba(15,23,42,.1); }
.progress.small { height: 8px; }
.progress.large { height: 30px; }
.progress-bar {
    height: 100%; border-radius: 999px; display: flex; align-items: center;
    justify-content: center; font-weight: 600; font-size: .8rem; color: #fff;
    background: linear-gradient(90deg,#22c55e,#16a34a);
    transition: width .4s ease, background-color .4s ease;
}
.progress-bar.bg-success { background: linear-gradient(90deg,#22c55e,#16a34a); }
.progress-bar.bg-warning { background: linear-gradient(90deg,#facc15,#eab308); color: #1f2937; }
.progress-bar.bg-danger  { background: linear-gradient(90deg,#ef4444,#b91c1c); }

.table-responsive { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table thead th {
    border-bottom: 2px solid var(--phe-border); font-weight: 600;
    color: #4b5563; background: #f8faff; padding: .75rem; text-align: left;
    font-size: .75rem; text-transform: uppercase; letter-spacing: .03em;
}
.table tbody td { vertical-align: middle; padding: .75rem; border-bottom: 1px solid #e5e7eb; }
.table-hover tbody tr:hover { background: #f3f4f6; }
.table-primary { background: var(--phe-primary-soft); }

.valor-icono { font-size: 2rem; margin-bottom: 4px; }

@keyframes slideIn { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }
.animate-add { animation: slideIn .4s ease; }
@keyframes slideInRight { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
.alert-dismissible { animation: slideInRight .3s ease; }

/* Hero */
.app-hero {
    display: grid; grid-template-columns: 180px minmax(0,1fr) 180px;
    align-items: center; gap: 18px; padding: 18px 22px;
    border-left: 4px solid var(--phe-primary);
}
.app-logo { width: 150px; height: 120px; object-fit: contain;
            background: #fff; border-radius: 16px; padding: 10px;
            box-shadow: 0 7px 18px rgba(124,58,237,.16); }
.eyebrow { color: var(--phe-primary); font-size: .72rem; font-weight: 700;
           letter-spacing: .09em; text-transform: uppercase; }
.app-hero > div { grid-column: 2; text-align: center; }
.app-hero::after { content: ''; grid-column: 3; grid-row: 1; }
.app-hero h1 { margin: 3px 0; font-size: 1.75rem; color: var(--phe-primary-dark);
               letter-spacing: -.03em; }
.app-hero p { margin: 0; color: var(--phe-muted); font-size: .95rem; }

.daily-limit-card { border-left: 4px solid var(--phe-primary); }
.daily-limit-content { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.daily-limit-field { width: min(100%, 270px); flex: 0 0 270px; }
.section-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.section-heading h5 { color: var(--phe-text); font-size: 1rem; margin: 0; }
.section-heading p { margin: 3px 0 0; color: var(--phe-muted); font-size: .78rem; }
.section-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; }
.section-icon-purple { color: var(--phe-primary); background: var(--phe-primary-soft); }
.limit-input-wrap { position: relative; }
.limit-input-wrap .form-control { padding-right: 62px; font-weight: 700; }
.limit-input-wrap span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
                         color: var(--phe-muted); font-weight: 600; font-size: .85rem; }

.compact-filters {
    display: grid; grid-template-columns: minmax(160px,1.4fr) minmax(130px,1fr) minmax(120px,1fr) 36px;
    gap: 8px; align-items: center; padding: 10px; margin-bottom: 18px;
    border: 1px solid var(--phe-border); border-radius: 12px; background: #f8faff;
}
.compact-filters .filter-control, .filter-field {
    height: 36px; min-width: 0; border: 1px solid #dbe4f0;
    border-radius: 8px; background: #fff; color: #475569; font: inherit; font-size: .79rem;
}
.compact-filters .filter-control { appearance: auto; padding: 0 9px; cursor: pointer; }
.filter-field { display: flex; align-items: center; gap: 7px; padding: 0 10px; }
.filter-field i { color: #94a3b8; font-size: .78rem; }
.filter-field input { min-width: 0; width: 100%; border: 0; outline: 0;
                      background: transparent; font: inherit; font-size: .79rem; }
.btn-filter-reset { width: 36px; height: 36px; padding: 0; color: #64748b;
                    background: #fff; border-color: #dbe4f0; }
.btn-filter-reset:hover { color: var(--phe-primary); border-color: var(--phe-primary); background: #eff6ff; }

/* Responsive */
@media (max-width: 991px) {
    body { padding: 20px 0 32px; }
    .container-fluid { max-width: 760px; }
    .col-lg-4, .col-lg-8 { flex: 0 0 100%; max-width: 100%; }
}
@media (max-width: 767px) {
    .container-fluid { padding: 0 12px; }
    .app-hero { display: flex; gap: 12px; padding: 15px; }
    .app-logo { width: 64px; height: 64px; border-radius: 12px; }
    .app-hero > div { text-align: left; }
    .app-hero h1 { font-size: 1.2rem; }
    .app-hero p { font-size: .79rem; }
    .daily-limit-content { display: block; }
    .daily-limit-field { width: 100%; }
    .compact-filters { grid-template-columns: 1fr 1fr 36px; padding: 8px; }
    .filter-search { grid-column: 1 / -1; }
    .table thead th, .table tbody td { padding: .65rem .5rem; }
}
@media (max-width: 600px) {
    .table-responsive { width: 100%; margin: 0; padding: 0; overflow: visible; }
    .table { min-width: 0; display: block; }
    .table thead { display: none; }
    .table tbody, .table tfoot { display: block; }
    .table tbody tr {
        display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
        margin-bottom: 10px; padding: 10px 12px;
        border: 1px solid #e5ebf4; border-radius: 10px; background: #fff;
        box-shadow: 0 2px 6px rgba(15,23,42,.04);
    }
    .table tbody td { display: block; padding: 3px 0; border: 0; font-size: .82rem; }
    .table tbody td:first-child { grid-column: 1 / -1; padding-bottom: 5px; }
    .table tbody td:nth-child(2)::before { content: 'Cantidad: '; color: #64748b; }
    .table tbody td:nth-child(3)::before { content: 'Fenilalanina: '; color: #64748b; }
    .table tbody td:nth-child(5) { text-align: right; }
}