:root {
    --navy: #0d1b2e;
    --navy2: #14263f;
    --navy3: #1b304b;
    --orange: #e66a00;
    --orange2: #f28a2a;
    --gold: #d0a52c;
    --ink: #17263b;
    --muted: #6d7786;
    --line: #dfe4ea;
    --bg: #eef1f5;
    --surface: #fff;
    --soft: #f5f7f9;
    --danger: #b54747;
    --ok: #2e7a52
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: 'DM Sans',sans-serif;
    color: var(--ink);
    background: var(--bg)
}

a {
    text-decoration: none;
    color: inherit
}

.admin-body {
    min-height: 100vh
}

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

.sidebar {
    width: 258px;
    background: linear-gradient(180deg,var(--navy),#0a1626);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    box-shadow: 8px 0 30px rgba(13,27,46,.08)
}

.brand {
    height: 82px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,.08)
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg,var(--orange),var(--gold));
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    letter-spacing: -1px;
    box-shadow: 0 7px 18px rgba(230,106,0,.22)
}

.brand strong {
    display: block;
    font-size: 14px;
    letter-spacing: .1px
}

.brand span {
    display: block;
    font-size: 9px;
    color: #9aabbd;
    margin-top: 3px;
    letter-spacing: 1.2px;
    text-transform: uppercase
}

.nav-menu {
    padding: 18px 12px;
    overflow: auto
}

.nav-link-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #aebdcd;
    padding: 11px 13px;
    border-radius: 9px;
    margin: 3px 0;
    font-size: 12px;
    font-weight: 600;
    transition: .15s
}

    .nav-link-item:hover {
        background: rgba(255,255,255,.07);
        color: #fff;
        transform: translateX(1px)
    }

.nav-menu i {
    font-size: 16px;
    width: 20px;
    text-align: center
}

.nav-label {
    font-size: 8px;
    letter-spacing: 1.7px;
    color: #687d92;
    padding: 18px 13px 7px;
    font-weight: 800
}

.sidebar-bottom {
    margin-top: auto;
    padding: 14px 12px;
    border-top: 1px solid rgba(255,255,255,.08)
}

.secure-note {
    font-size: 9px;
    color: #758ba0;
    padding: 8px 10px;
    display: flex;
    gap: 8px;
    align-items: center
}

.logout-btn {
    width: 100%;
    border: 0;
    background: transparent;
    color: #9aabbd;
    padding: 10px;
    border-radius: 9px;
    font: inherit;
    font-size: 11px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px
}

    .logout-btn:hover {
        background: rgba(230,106,0,.1);
        color: #fff
    }

.main-area {
    margin-left: 258px;
    width: calc(100% - 258px);
    min-width: 0
}

.topbar {
    height: 82px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    padding: 0 30px;
    gap: 18px;
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(10px)
}

.topbar-context {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0
}

.topbar-title {
    font-weight: 800;
    font-size: 14px
}

.topbar-restaurant {
    font-size: 10px;
    color: var(--muted);
    border-left: 1px solid var(--line);
    padding-left: 15px;
    white-space: nowrap
}

.user-chip {
    display: flex;
    gap: 10px;
    align-items: center
}

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg,#f3e8dc,#e7eef5);
    color: var(--navy);
    display: grid;
    place-items: center;
    font-weight: 800;
    border: 1px solid var(--line)
}

.user-info span, .user-info strong {
    display: block
}

.user-info strong {
    font-size: 11px
}

.user-info span {
    font-size: 9px;
    color: var(--muted);
    margin-top: 2px
}

.content {
    padding: 32px;
    max-width: 1500px;
    margin: auto
}

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px
}

.eyebrow {
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--orange);
    font-weight: 800
}

.page-head h1 {
    font-size: 30px;
    line-height: 1.15;
    margin: 6px 0 5px;
    font-weight: 800;
    color: var(--navy)
}

.page-head p {
    color: var(--muted);
    margin: 0;
    font-size: 12px
}

.btn {
    font-size: 11px;
    font-weight: 700;
    border-radius: 8px;
    padding: 9px 13px
}

.btn-primary {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff
}

    .btn-primary:hover {
        background: #c95c00;
        border-color: #c95c00;
        color: #fff
    }

.btn-light {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink)
}

    .btn-light:hover {
        background: #f5f7f9;
        border-color: #cbd3dc
    }

.btn-outline-danger {
    border-radius: 8px;
    font-size: 11px
}

.card-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0;
    box-shadow: 0 10px 28px rgba(13,27,46,.045);
    overflow: hidden
}

/* Encabezado de la cola de moderación, con espaciado propio porque la tarjeta no lleva padding global. */
.pending-images-panel__header {
    margin: 0 !important;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--line);
}

.pending-images-panel__more {
    padding: 0 22px 18px;
}

    .card-panel .table {
        margin: 0
    }

.table {
    font-size: 11px
}

    .table thead th {
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #7b8794;
        border-bottom: 1px solid var(--line);
        padding: 14px 17px;
        background: #f8fafc;
        font-weight: 800
    }

    .table td {
        padding: 14px 17px;
        border-color: #edf0f3;
        vertical-align: middle
    }

.muted {
    font-size: 10px;
    color: var(--muted);
    margin-top: 3px
}

.status {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 99px;
    font-size: 9px;
    font-weight: 800
}

.status-ok {
    background: #e7f4ec;
    color: #2f704d
}

.status-off {
    background: #eef0f2;
    color: #6e7882
}

/* Tablas de configuración: columnas proporcionadas al contenido y acciones separadas con espacio uniforme. */
.admin-record-table {
    width: 100%;
    table-layout: fixed;
}

.family-admin-table { min-width: 790px; }
.family-order-column { width: 62px; }
.family-name-column { width: auto; }
.family-products-column { width: 126px; }
.family-status-column { width: 96px; }
.family-actions-column { width: 246px; }

.product-admin-table { min-width: 1040px; }
.product-status-filter { display: flex; flex-direction: column; width: min(100%, 280px); }
.product-deleted-date { display: block; margin-top: 5px; color: #657184; }
.product-photo-column { width: 92px; }
.product-name-column { width: 30%; }
.product-families-column { width: 22%; }
.product-price-column { width: 108px; }
.product-status-column { width: 108px; }
.product-actions-column { width: 254px; }

.restaurant-admin-table { min-width: 1250px; }
.restaurant-name-column { width: 21%; }
.restaurant-status-column { width: 88px; }
.restaurant-moderation-column { width: 144px; }
.restaurant-color-permission-column { width: 156px; }
.restaurant-feedback-column { width: 210px; }
.restaurant-actions-column { width: 30%; }

.admin-record-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-record-actions form { display: inline-flex; margin: 0; }
.status-compact, .family-products-label-compact, .mobile-field-label, .product-price-compact { display: none; }
.product-name-and-price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.product-list-photo { width: 64px; height: 54px; object-fit: cover; border: 1px solid #ddd; border-radius: 8px; }
.product-image-pending { display: block; margin-top: 5px; color: #a66b00; }

.restaurant-status-form { display: flex; justify-content: center; margin: 0; }
.restaurant-feedback-controls { display: grid; gap: 8px; }
.restaurant-feedback-control { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.restaurant-feedback-control .mobile-field-label { display: inline; font-size: 11px; line-height: 1.2; }
.restaurant-feedback-control .restaurant-status-form { flex: 0 0 auto; }
.restaurant-status-switch { display: inline-flex; align-items: center; margin: 0; cursor: pointer; }
.restaurant-status-switch .form-check-input {
    width: 2.5rem;
    height: 1.35rem;
    margin: 0;
    cursor: pointer;
}
.restaurant-status-switch .form-check-input:checked { background-color: #2f704d; border-color: #2f704d; }
.restaurant-status-switch .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(47, 112, 77, .2); }

.order-pill {
    display: inline-grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border-radius: 8px;
    background: #f0f3f6;
    color: var(--navy);
    font-weight: 800
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px
}

.tag {
    display: inline-flex;
    background: #edf1f5;
    color: #506070;
    border-radius: 99px;
    padding: 4px 8px;
    font-size: 9px
}

.form-panel {
    padding: 25px
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

    .form-grid .full {
        grid-column: 1/-1
    }

.form-label {
    font-size: 10px;
    font-weight: 800;
    color: #4c5b6b;
    margin-bottom: 7px
}

.form-control, .form-select {
    border-color: #d9e0e7;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 11px;
    box-shadow: none
}

    .form-control:focus, .form-select:focus {
        border-color: var(--orange);
        box-shadow: 0 0 0 3px rgba(230,106,0,.09)
    }

textarea.form-control {
    min-height: 105px
}

.form-actions {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px
}

.form-check {
    font-size: 11px
}

.family-select {
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 10px;
    display: grid;
    gap: 8px;
    max-height: 170px;
    overflow: auto;
    background: #fafbfd
}

    .family-select label {
        font-size: 11px
    }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
    margin-bottom: 20px
}

.stat-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    position: relative;
    overflow: hidden
}

    .stat-card:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--orange)
    }

    .stat-card span, .stat-card small {
        display: block;
        color: var(--muted);
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: .6px
    }

    .stat-card strong {
        display: block;
        font-size: 24px;
        margin: 8px 0 3px;
        color: var(--navy)
    }

.welcome-panel {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 26px
}

.welcome-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: #f7eadf;
    color: var(--orange);
    display: grid;
    place-items: center;
    font-size: 25px
}

.welcome-panel h2 {
    font-size: 21px;
    margin: 0 0 6px;
    font-weight: 800;
    color: var(--navy)
}

.welcome-panel p {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 15px
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px
}

.quick-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    gap: 14px;
    align-items: center;
    transition: .15s
}

    .quick-card:hover {
        border-color: #c8d1db;
        transform: translateY(-1px);
        box-shadow: 0 10px 24px rgba(13,27,46,.05)
    }

    .quick-card > i {
        font-size: 22px;
        color: var(--orange)
    }

    .quick-card strong, .quick-card span {
        display: block
    }

    .quick-card strong {
        font-size: 12px
    }

    .quick-card span {
        font-size: 9px;
        color: var(--muted);
        margin-top: 3px
    }

.qr-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 18px
}

.qr-card {
    padding: 28px;
    text-align: center
}

.qr-box {
    min-height: 220px;
    display: grid;
    place-items: center
}

.info-box {
    background: #f3f6f9;
    border-radius: 10px;
    padding: 13px;
    font-size: 10px;
    color: #5d6b79;
    display: flex;
    gap: 9px
}

.empty-state {
    text-align: center;
    padding: 85px 20px
}

    .empty-state > i {
        font-size: 42px;
        color: var(--orange)
    }

    .empty-state h1 {
        font-weight: 800;
        color: var(--navy)
    }

.mobile-menu {
    display: none;
    border: 0;
    background: transparent;
    font-size: 22px;
    color: var(--navy)
}

.login-body {
    min-height: 100vh;
    background: #eef1f5;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    padding: 24px
}

.login-bg {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 10% 15%,rgba(230,106,0,.10),transparent 27%),radial-gradient(circle at 90% 85%,rgba(13,27,46,.11),transparent 31%)
}

.login-shell {
    position: relative;
    width: min(1050px,100%);
    min-height: 620px;
    display: grid;
    grid-template-columns: 43% 57%;
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 28px 75px rgba(13,27,46,.19);
    border: 1px solid rgba(255,255,255,.8)
}

.login-brand-panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg,var(--navy),var(--navy2) 60%,#10233b);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px
}

    .login-brand-panel:after {
        content: "";
        position: absolute;
        right: -2px;
        top: 8%;
        height: 84%;
        width: 4px;
        background: linear-gradient(to bottom,transparent,var(--orange),transparent)
    }

.login-brand-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 330px
}

.login-logo {
    width: 150px;
    height: 150px;
    margin: 0 auto 25px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 43px;
    font-weight: 800;
    background: linear-gradient(135deg,var(--orange),var(--gold));
    box-shadow: 0 18px 40px rgba(0,0,0,.28),0 0 0 7px rgba(255,255,255,.04)
}

.login-brand-name {
    font-size: 31px;
    font-weight: 800;
    letter-spacing: .2px
}

.login-brand-subtitle {
    font-size: 10px;
    letter-spacing: 4px;
    color: var(--orange2);
    font-weight: 800;
    margin-top: 6px
}

.login-brand-line {
    width: 54px;
    height: 3px;
    background: var(--orange);
    border-radius: 99px;
    margin: 22px auto
}

.login-brand-content p {
    color: rgba(255,255,255,.72);
    font-size: 12px;
    line-height: 1.7;
    margin: 0
}

.login-brand-decoration {
    position: absolute;
    border: 1px solid rgba(230,106,0,.14);
    border-radius: 50%;
    pointer-events: none
}

.decoration-one {
    width: 310px;
    height: 310px;
    right: -155px;
    top: -110px
}

.decoration-two {
    width: 250px;
    height: 250px;
    left: -145px;
    bottom: -110px
}

.login-form-panel {
    display: flex;
    align-items: center;
    padding: 55px
}

.login-form-inner {
    width: min(390px,100%);
    margin: auto
}

.login-heading span {
    font-size: 9px;
    letter-spacing: 1.8px;
    color: var(--orange);
    font-weight: 800
}

.login-heading h1 {
    margin: 8px 0 5px;
    font-size: 30px;
    color: var(--navy);
    font-weight: 800
}

.login-heading p {
    font-size: 11px;
    color: var(--muted);
    margin: 0 0 28px
}

.login-context {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f4f6f8;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 12px 13px;
    margin-bottom: 24px
}

    .login-context > i {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        background: #f7eadf;
        color: var(--orange);
        display: grid;
        place-items: center
    }

    .login-context small, .login-context strong {
        display: block
    }

    .login-context small {
        font-size: 8px;
        letter-spacing: 1.2px;
        color: var(--muted);
        font-weight: 800
    }

    .login-context strong {
        font-size: 12px;
        margin-top: 2px
    }

.login-field {
    margin-bottom: 17px
}

    .login-field label {
        display: block;
        font-size: 10px;
        font-weight: 800;
        color: #435366;
        margin-bottom: 7px
    }

        .login-field label span {
            font-weight: 500;
            color: #8b96a2
        }

.login-input {
    position: relative
}

    .login-input i {
        position: absolute;
        left: 13px;
        top: 12px;
        color: #8c98a5;
        font-size: 14px
    }

    .login-input input {
        width: 100%;
        height: 45px;
        border: 1px solid #d8dfe7;
        border-radius: 9px;
        padding: 0 13px 0 38px;
        font-size: 11px;
        outline: none;
        color: var(--ink)
    }

        .login-input input:focus {
            border-color: var(--orange);
            box-shadow: 0 0 0 3px rgba(230,106,0,.08)
        }

.field-error {
    font-size: 9px;
    color: var(--danger);
    display: block;
    margin-top: 5px
}

.login-error {
    font-size: 10px;
    color: var(--danger);
    background: #fff1f1;
    border: 1px solid #f1d4d4;
    border-radius: 8px;
    padding: 9px 10px;
    margin-bottom: 15px
}

    .login-error:empty {
        display: none
    }

.login-button {
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 9px;
    background: var(--orange);
    color: #fff;
    font-weight: 800;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    transition: .15s
}

    .login-button:hover {
        background: #c95c00
    }

.login-back {
    display: block;
    text-align: center;
    margin-top: 17px;
    color: var(--muted);
    font-size: 10px
}

    .login-back:hover {
        color: var(--orange)
    }

.login-security {
    text-align: center;
    color: #8c98a5;
    font-size: 8px;
    margin-top: 24px;
    letter-spacing: .2px
}

    .login-security i {
        color: var(--orange)
    }

.public-body {
    background: #e8dfce;
    color: #382d20;
    min-height: 100vh
}

.public-hero {
    min-height: 250px;
    background: linear-gradient(135deg,#3d2f20,#6d5436);
    color: #f7e9cb;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
    padding: 40px 20px;
    position: relative
}

.public-brand {
    width: 72px;
    height: 72px;
    border: 2px solid #d8b879;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #d8b879
}

.public-hero h1 {
    font-family: Georgia,serif;
    font-size: 48px;
    margin: 0
}

.public-hero p {
    margin: 0;
    color: #e4cda5
}

.public-content {
    max-width: 900px;
    margin: auto;
    padding: 25px 18px 60px
}

.family-nav {
    display: flex;
    gap: 8px;
    overflow: auto;
    padding-bottom: 16px;
    position: sticky;
    top: 0;
    background: #e8dfce;
    z-index: 2
}

    .family-nav a {
        white-space: nowrap;
        border: 1px solid #cfc0a8;
        padding: 8px 13px;
        border-radius: 99px;
        font-size: 11px;
        background: #eee5d5
    }

.menu-family {
    padding: 25px 0;
    border-bottom: 1px solid #cdbda3
}

    .menu-family h2 {
        font-family: Georgia,serif;
        font-size: 34px;
        margin: 0
    }

    .menu-family > p {
        font-size: 12px;
        color: #75624b
    }

.menu-grid {
    display: grid;
    gap: 10px
}

.menu-item {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 0;
    border-bottom: 1px dashed #cdbda3
}

    .menu-item h3 {
        font-family: Georgia,serif;
        font-size: 22px;
        margin: 0
    }

    .menu-item p {
        font-size: 11px;
        margin: 3px 0 0;
        color: #75624b
    }

    .menu-item > strong {
        font-family: Georgia,serif;
        font-size: 20px;
        white-space: nowrap
    }

@media(max-width:900px) {
    .sidebar {
        transform: translateX(-100%);
        transition: .25s
    }

        .sidebar.open {
            transform: none
        }

    .main-area {
        margin-left: 0;
        width: 100%
    }

    .mobile-menu {
        display: block
    }

    .topbar {
        padding: 0 18px
    }

    .content {
        padding: 22px 16px
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr
    }

    .quick-grid {
        grid-template-columns: 1fr
    }

    .qr-layout {
        grid-template-columns: 1fr
    }

    .form-grid {
        grid-template-columns: 1fr
    }

        .form-grid .full {
            grid-column: auto
        }

    .user-info {
        display: none
    }

    .page-head {
        align-items: flex-start;
        flex-direction: column
    }

        .page-head .btn {
            align-self: flex-start
        }

    .table {
        min-width: 720px
    }

    /* En móvil la tabla de pendientes se convierte en tarjetas para evitar desplazamiento horizontal. */
    .pending-images-panel {
        overflow: hidden;
    }

    .pending-images-panel .table-responsive {
        overflow: visible;
    }

    .pending-images-panel .pending-images-table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    .pending-images-panel .pending-images-table thead {
        display: none;
    }

    .pending-images-panel .pending-images-table tbody {
        display: grid;
        gap: 10px;
        padding: 12px;
    }

    .pending-images-panel .pending-images-table tbody tr {
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr) auto;
        grid-template-areas:
            "thumb restaurant action"
            "thumb element element"
            "date date date";
        align-items: center;
        gap: 3px 10px;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 11px;
        background: #fff;
        box-shadow: 0 4px 12px rgba(13, 27, 46, .045);
    }

    .pending-images-panel .pending-images-table tbody td {
        min-width: 0;
        padding: 0;
        border: 0;
        white-space: normal;
    }

    .pending-images-panel .pending-images-table tbody td:nth-child(1) { grid-area: thumb; }
    .pending-images-panel .pending-images-table tbody td:nth-child(2) { grid-area: restaurant; }
    .pending-images-panel .pending-images-table tbody td:nth-child(3) { grid-area: element; }
    .pending-images-panel .pending-images-table tbody td:nth-child(4) {
        grid-area: date;
        padding-top: 7px;
        border-top: 1px solid #edf0f3;
        color: #77818d;
        font-size: 10px;
    }
    .pending-images-panel .pending-images-table tbody td:nth-child(5) {
        grid-area: action;
        align-self: start;
    }

    .pending-images-panel .pending-image-thumb {
        display: block;
        width: 54px;
        height: 54px;
    }

    .pending-images-panel .pending-images-table .btn {
        padding: 5px 8px;
        font-size: 11px;
        white-space: nowrap;
    }

    /* Mantiene un área cómoda de toque cuando la etiqueta del enlace pasa a solo icono. */
    .pending-images-panel .pending-images-table .btn-responsive.btn-sm {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0 !important;
        gap: 0;
        justify-content: center;
    }

    .pending-images-panel .pending-images-table .btn-label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .pending-images-panel__more {
        padding-inline: 16px;
    }

    .card-panel {
        overflow: auto
    }

        .card-panel.form-panel {
            overflow: visible
        }

    .login-shell {
        grid-template-columns: 1fr;
        max-width: 520px;
        min-height: 0
    }

    .login-brand-panel {
        min-height: 230px;
        padding: 35px
    }

        .login-brand-panel:after {
            display: none
        }

    .login-logo {
        width: 95px;
        height: 95px;
        font-size: 28px;
        margin-bottom: 14px
    }

    .login-brand-name {
        font-size: 24px
    }

    .login-brand-subtitle {
        font-size: 8px
    }

    .login-brand-line {
        margin: 13px auto
    }

    .login-brand-content p {
        display: none
    }

    .login-form-panel {
        padding: 35px 28px
    }

    .public-hero h1 {
        font-size: 40px
    }
}

@media (max-width: 900px) {
    /* En listados compactos, las etiquetas pasan a texto accesible y los controles quedan solo con icono. */
    .admin-record-actions .btn-responsive.btn-sm {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0 !important;
        gap: 0;
        justify-content: center;
    }

    .admin-record-actions .btn-label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .status-full,
    .family-products-label-full { display: none !important; }

    .status-compact,
    .family-products-label-compact { display: inline-grid !important; }

    .family-admin-table { min-width: 720px; }
    .family-products-column { width: 94px; }
    .family-status-column { width: 64px; }
    .family-actions-column { width: 190px; }

    .product-admin-table { min-width: 900px; }
    .product-actions-column { width: 210px; }

    .restaurant-admin-table { min-width: 1100px; }
    .restaurant-actions-column { width: 230px; }

    .image-moderation-table .admin-record-actions { gap: 7px; }

    .status-icon {
        width: 30px;
        height: 30px;
        place-items: center;
        border-radius: 50%;
        font-size: 14px;
    }

    .status-icon.status-ok { background: #e7f4ec; color: #2f704d; }
    .status-icon.status-off { background: #eef0f2; color: #6e7882; }
}

@media (max-width: 700px) {
    /* En móvil, las tablas de configuración se convierten en tarjetas con celdas en bloque.
       display:block en las celdas evita que el formato nativo de tabla las comprima dentro del grid. */
    .card-panel:has(.admin-record-table) { overflow: hidden; }
    /* Bootstrap mantiene el algoritmo y el ancho de tabla incluso al convertir las filas en tarjetas.
       Se cambia también la tabla a bloque para que los anchos del colgroup no aplasten el contenido. */
    .admin-record-table {
        display: block !important;
        width: 100%;
        min-width: 0 !important;
        table-layout: auto;
        border-collapse: separate;
    }
    .admin-record-table colgroup { display: none; }
    .admin-record-table tbody { width: 100%; }
    .admin-record-table thead { display: none; }
    .admin-record-table tbody { display: grid; gap: 12px; padding: 14px; }
    .admin-record-table tbody tr {
        display: grid;
        width: 100%;
        box-sizing: border-box;
        align-items: start;
        gap: 10px 12px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 4px 14px rgba(13, 27, 46, .045);
    }
    .admin-record-table tbody td {
        display: block !important;
        min-width: 0;
        padding: 0;
        border: 0;
        white-space: normal;
    }
    .admin-record-table .admin-record-actions {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .family-admin-table tbody tr {
        grid-template-columns: 30px minmax(0, 1fr) auto;
        grid-template-areas: "order family family" "products products products" "actions actions actions";
    }
    .family-order-cell { grid-area: order; }
    .family-name-cell { grid-area: family; }
    .family-products-cell { grid-area: products; display: flex; align-items: baseline; gap: 6px; color: #586575; font-size: 12px; }
    .family-status-cell { display: none !important; }
    .family-actions-cell { grid-area: actions; padding-top: 12px !important; border-top: 1px solid var(--line) !important; }
    .family-actions-cell .admin-record-actions { gap: 7px; }
    .family-actions-cell .status-icon { flex: 0 0 30px; }
    .mobile-field-label { display: inline; font-weight: 700; }

    .product-admin-table tbody tr {
        grid-template-columns: 62px minmax(0, 1fr) auto;
        grid-template-areas: "photo product product" "photo families families" "actions actions actions";
    }
    .product-photo-cell { grid-area: photo; align-self: start; }
    .product-name-cell { grid-area: product; }
    .product-families-cell { grid-area: families; }
    /* La regla específica de las celdas de la tabla no debe volver a mostrar el precio de escritorio. */
    .product-admin-table tbody td.product-price-cell { display: none !important; }
    .product-status-cell { display: none !important; }
    .product-actions-cell { grid-area: actions; justify-self: stretch; padding-top: 12px !important; border-top: 1px solid var(--line) !important; }
    .product-actions-cell .admin-record-actions { width: 100%; gap: 7px; }
    .product-actions-cell .status-icon { flex: 0 0 30px; }
    .product-list-photo { width: 58px; height: 58px; }
    .product-price-compact { display: inline; margin-left: auto; color: var(--navy); font-size: 12px; white-space: nowrap; }
    .product-name-and-price { align-items: flex-start; }
    .product-image-pending { font-size: 10px; }
    .product-status-filter { width: 100%; }

    /* En móvil agrupa primero los interruptores y deja los accesos directos como últimas acciones. */
    .restaurant-admin-table tbody tr {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "restaurant" "state" "approval" "colors" "feedback" "actions";
    }
    .restaurant-name-cell { grid-area: restaurant; }
    .restaurant-status-cell {
        grid-area: state;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-top: 9px !important;
        border-top: 1px solid var(--line) !important;
    }
    .restaurant-status-cell .mobile-field-label { display: inline; }
    .restaurant-status-cell .mobile-field-label,
    .restaurant-moderation-cell .mobile-field-label,
    .restaurant-color-permission-cell .mobile-field-label {
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
    }
    .restaurant-status-cell .restaurant-status-form,
    .restaurant-moderation-cell .restaurant-status-form,
    .restaurant-color-permission-cell .restaurant-status-form {
        flex: 0 0 auto;
        margin-left: auto;
        justify-content: flex-end;
    }
    .restaurant-moderation-cell {
        grid-area: approval;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-top: 9px !important;
        border-top: 1px solid var(--line) !important;
    }
    .restaurant-moderation-cell .mobile-field-label { display: inline; }
    .restaurant-color-permission-cell {
        grid-area: colors;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-top: 9px !important;
        border-top: 1px solid var(--line) !important;
    }
    .restaurant-color-permission-cell .mobile-field-label { display: inline; }
    .restaurant-feedback-cell {
        grid-area: feedback;
        display: block !important;
        padding-top: 9px !important;
        border-top: 1px solid var(--line) !important;
    }
    .restaurant-feedback-controls { gap: 10px; }
    .restaurant-feedback-control { min-height: 34px; }
    .restaurant-feedback-control .mobile-field-label { flex: 1 1 auto; min-width: 0; }
    .restaurant-feedback-control .restaurant-status-form { margin-left: auto; justify-content: flex-end; }
    .restaurant-actions-cell { grid-area: actions; padding-top: 12px !important; border-top: 1px solid var(--line) !important; }
    .restaurant-admin-table .admin-record-actions { justify-content: flex-start; flex-wrap: wrap; }

    /* La moderación conserva sus columnas y se desplaza horizontalmente para mantener la lectura. */
    .image-moderation-table { min-width: 780px; }
    .image-moderation-table .admin-record-actions { flex-wrap: nowrap; gap: 10px; }

    .image-moderation-table .status-full { display: none !important; }
    .image-moderation-table .status-compact { display: inline-grid !important; }
}

@media(max-width:500px) {
    .admin-record-table tbody { gap: 10px; padding: 10px; }
    .admin-record-table tbody tr { padding: 12px; gap: 10px; }
    .admin-record-actions { gap: 10px; }

    .stats-grid {
        grid-template-columns: 1fr 1fr
    }

    .stat-card {
        padding: 15px
    }

        .stat-card strong {
            font-size: 20px
        }

    .login-body {
        padding: 12px
    }

    .login-form-panel {
        padding: 28px 20px
    }

    .login-brand-panel {
        min-height: 200px
    }

    .topbar-restaurant {
        display: none
    }

    .public-hero {
        min-height: 210px
    }

        .public-hero h1 {
            font-size: 34px
        }
}

.admin-image-thumb {
    width: 70px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #f5f7f9
}

/* V1.7 - Login responsive hardening */
.login-form-panel {
    min-width: 0;
}

.login-form-inner {
    width: min(390px, 100%);
    max-width: 100%;
}

.login-heading, .login-field, .login-input, .login-input input, .login-button {
    max-width: 100%;
}

    .login-input input {
        display: block;
        min-width: 0;
        box-sizing: border-box;
    }

.login-error {
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 900px) {
    .login-shell {
        width: min(520px, 100%);
    }

    .login-form-panel {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 500px) {
    .login-shell {
        width: 100%;
        border-radius: 16px;
    }

    .login-form-panel {
        padding: 28px 20px;
    }

    .login-form-inner {
        width: 100%;
    }

    .login-heading h1 {
        font-size: 27px;
    }

    .login-input input {
        width: 100%;
        height: 46px;
        padding-right: 12px;
    }
}

/* Auditoría: mantener los detalles legibles sin desbordar la tabla. */
.audit-changes {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    display: inline-block;
    max-width: 420px;
}

/* Acabado común del panel: superficies claras, jerarquía limpia y controles coherentes. */
.admin-body {
    background: #f1f4f7;
}

.content {
    max-width: 1600px;
    padding: clamp(20px, 3vw, 38px);
}

.topbar {
    height: 76px;
    background: rgba(255, 255, 255, .97);
}

.card-panel,
.stat-card,
.quick-card {
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(13, 27, 46, .055);
}

.card-panel {
    border-color: #e1e6ec;
}

.table tbody tr {
    transition: background-color .16s ease;
}

.table tbody tr:hover {
    background: #fafbfd;
}

.btn,
.login-button,
.logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 38px;
    line-height: 1.2;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.btn i,
.login-button i,
.logout-btn i {
    flex: 0 0 auto;
    font-size: 1.05em;
}

.btn:focus-visible,
.login-button:focus-visible,
.logout-btn:focus-visible,
.mobile-menu:focus-visible {
    outline: 3px solid rgba(230, 106, 0, .45);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
}

.btn-action-positive {
    background: #28734f !important;
    border-color: #28734f !important;
    color: #fff !important;
}

.btn-action-positive:hover {
    background: #205f41 !important;
    border-color: #205f41 !important;
    color: #fff !important;
}

.btn-action-caution {
    background: #fff4dc !important;
    border-color: #efd49c !important;
    color: #744d12 !important;
}

.btn-action-caution:hover {
    background: #fce9bd !important;
    border-color: #dfbd73 !important;
    color: #5f3c0b !important;
}

.btn-action-danger {
    background: #b63838 !important;
    border-color: #b63838 !important;
    color: #fff !important;
}

.btn-action-danger:hover {
    background: #982d2d !important;
    border-color: #982d2d !important;
    color: #fff !important;
}

.btn-action-info {
    background: #eaf1f7 !important;
    border-color: #d5e1eb !important;
    color: #244b6b !important;
}

.btn-action-info:hover {
    background: #dce9f3 !important;
    border-color: #bed1e1 !important;
    color: #183c59 !important;
}

.btn-action-neutral {
    background: #fff !important;
    border-color: #dce3e9 !important;
    color: #455361 !important;
}

.btn-action-neutral:hover {
    background: #f1f4f6 !important;
    border-color: #c8d2db !important;
    color: #263642 !important;
}

@media (max-width: 575.98px) {
    .content {
        padding: 18px 12px 28px;
    }

    .btn-responsive {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0 !important;
        gap: 0;
    }

    .btn-responsive.btn-sm {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
    }

    .btn-responsive .btn-label,
    .logout-btn .btn-label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

.login-button.btn-responsive {
        width: 100%;
        height: 46px;
        min-height: 46px;
    }
}

.password-visibility-toggle {
    min-width: 46px;
}

.password-strength .progress {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background-color: #e9edf1;
}

.password-strength .progress-bar {
    transition: width .18s ease;
}

@media (max-width: 575.98px) {
    .password-visibility-toggle {
        min-width: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .login-button,
    .logout-btn,
    .table tbody tr,
    .quick-card {
        transition-duration: .01ms !important;
    }
}

/* Currency catalog page: align with the platform administration panels on desktop and phones. */
.currency-catalog-form-panel { padding: 22px 24px; border-top: 3px solid var(--orange); }
.currency-catalog-table-panel { padding: 0; }
.currency-catalog-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}
.currency-catalog-section-heading h2 { margin: 0; font-size: 1.1rem; }
.currency-catalog-table-panel .currency-catalog-section-heading {
    padding: 20px 22px 16px;
    margin: 0;
    border-bottom: 1px solid var(--line);
}
.currency-catalog-fields {
    display: grid;
    grid-template-columns: minmax(110px, .75fr) minmax(200px, 1.6fr) minmax(130px, .75fr) minmax(120px, .65fr);
    gap: 1rem;
}
.currency-catalog-form-actions { display: flex; justify-content: flex-end; margin-top: 1.25rem; }
.currency-catalog-table { min-width: 850px; font-size: 12px; }
.currency-catalog-name { min-width: 180px; }
.currency-catalog-name strong,
.currency-catalog-name span { display: block; }
.currency-catalog-name strong { color: var(--navy, #17243a); letter-spacing: .05em; font-size: 13px; }
.currency-catalog-name span { color: #727b88; font-size: .9rem; }
.currency-symbol-chip {
    display: inline-grid;
    place-items: center;
    min-width: 42px;
    min-height: 34px;
    padding: .25rem .5rem;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    background: #f7f9fc;
    font-weight: 700;
}
.currency-catalog-table .admin-record-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.currency-catalog-table .admin-record-actions form { margin: 0; }
.currency-catalog-table .admin-record-actions .btn { white-space: nowrap; }

/* Survey administration cards keep question setup readable on desktop and stack cleanly on phones. */
.survey-admin-list { display: grid; gap: 16px; }
.survey-admin-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; }
.survey-admin-main h2 { margin: 0 0 10px; font-size: 1.12rem; font-weight: 700; }
.survey-state { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 10px; font-size: .82rem; font-weight: 700; }
.survey-state.is-active { color: #176344; background: #e4f4ec; }
.survey-state.is-paused { color: #626b78; background: #eef0f3; }
.survey-admin-stats { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 14px; color: var(--muted, #667085); font-size: .92rem; }
.survey-admin-stats strong { color: var(--ink, #202a3a); }
.survey-admin-actions { display: flex; align-items: center; gap: 9px; }
.survey-admin-actions form { margin: 0; }
/* Survey results use compact summary cards, accessible bars, and wrapping anonymous text replies. */
.survey-results-description { margin: -8px 0 18px; color: var(--muted, #667085); }
.survey-results-summary { display: flex; align-items: center; gap: 14px; max-width: 360px; padding: 18px 20px; }
.survey-results-summary-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; background: #eef3fa; color: #536a88; font-size: 1.25rem; }
.survey-results-summary > div { display: grid; gap: 2px; }
.survey-results-summary strong { color: var(--ink, #202a3a); font-size: 1.55rem; line-height: 1.1; }
.survey-results-summary > div span { color: var(--muted, #667085); font-size: .9rem; }
.survey-history-total { margin-top: 3px; color: var(--muted, #667085); font-size: .78rem; }
.survey-results-privacy { display: flex; align-items: center; gap: 7px; margin: 13px 0 22px; color: var(--muted, #667085); font-size: .88rem; }
.survey-round-history { margin: 24px 0; }
.survey-round-history-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.survey-round-history-heading h2 { margin: 0; font-size: 1.05rem; }
.survey-round-history-heading > span, .survey-round-summary-link { color: var(--muted, #667085); font-size: .85rem; }
.survey-round-summary-link { display: inline-flex; align-items: center; gap: 6px; color: #536a88; text-decoration: none; }
.survey-round-summary-link:hover { color: #354b69; text-decoration: underline; }
.survey-round-history-list { display: flex; flex-wrap: wrap; gap: 10px; }
.survey-round-history-card { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-width: 220px; padding: 12px 15px; }
.survey-round-history-card { color: inherit; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.survey-round-history-card:hover { border-color: #b8c5d5; box-shadow: 0 7px 18px rgba(31, 45, 63, .1); transform: translateY(-1px); }
.survey-round-history-card.is-selected { border-color: #7087a4; box-shadow: inset 3px 0 #7087a4, 0 3px 12px rgba(31, 45, 63, .08); }
.survey-round-history-card > div { display: grid; gap: 3px; }
.survey-round-history-card > div strong { color: var(--ink, #202a3a); }
.survey-round-history-card > div span, .survey-round-history-card > span { color: var(--muted, #667085); font-size: .84rem; }
.survey-round-history-card > div span { font-size: .78rem; }
.survey-results-list { display: grid; gap: 16px; }
.survey-results-section-title { margin: 26px 0 14px; font-size: 1.08rem; font-weight: 700; }
.survey-result-card { padding: 22px 24px; }
.survey-result-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.survey-result-heading .eyebrow { color: var(--muted, #667085); }
.survey-result-heading h2 { margin: 5px 0 0; font-size: 1.12rem; font-weight: 700; }
.survey-answered-count { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; background: #f1f3f6; color: #525c6b; font-size: .82rem; font-weight: 650; }
.survey-option-results { display: grid; gap: 16px; }
.survey-option-result { display: grid; gap: 7px; }
.survey-option-result-label { display: flex; justify-content: space-between; gap: 14px; color: var(--ink, #202a3a); font-size: .93rem; }
.survey-option-result-label > span { min-width: 0; overflow-wrap: anywhere; }
.survey-option-result-label strong { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.survey-option-result-label small { color: var(--muted, #667085); font-size: .85em; font-weight: 500; }
.survey-result-track { height: 9px; overflow: hidden; border-radius: 999px; background: #edf0f4; }
.survey-result-track > span { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, #667f9f, #8ea4bd); }
.survey-results-note, .survey-results-empty { margin: 17px 0 0; color: var(--muted, #667085); font-size: .88rem; }
.survey-round-comparison { display: grid; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #e7e9ee; }
.survey-round-comparison > h3 { margin: 0; font-size: 1rem; }
.survey-round-answer-block { display: grid; gap: 10px; }
.survey-round-answer-block h3, .survey-round-answer-block h4 { margin: 0; color: var(--ink, #202a3a); font-size: .94rem; }
.survey-round-answer-block h3 span, .survey-round-answer-block h4 span { color: var(--muted, #667085); font-size: .87rem; font-weight: 500; }
.survey-round-option-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.survey-round-option-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; background: #f7f8fa; color: #454d59; font-size: .88rem; }
.survey-round-option-list li > span { min-width: 0; overflow-wrap: anywhere; }
.survey-round-option-list strong { flex: 0 0 auto; }
.survey-round-option-list small { color: var(--muted, #667085); font-weight: 500; }
.survey-text-answer-list { display: grid; gap: 9px; margin: 0; padding-left: 1.4rem; }
.survey-text-answer-list li { padding: 11px 13px; border: 1px solid #e5e8ed; border-radius: 10px; background: #fafbfc; color: #3e4652; line-height: 1.5; overflow-wrap: anywhere; }
.survey-empty { padding: 42px 24px; text-align: center; }
.survey-empty > i { color: var(--orange, #e87514); font-size: 2rem; }
.survey-empty h2 { margin: 12px 0 6px; font-size: 1.25rem; }
.survey-empty p { color: var(--muted, #667085); }
.survey-form-panel { max-width: 980px; }
.survey-question-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 26px 0 14px; }
.survey-question-heading h2 { margin: 0 0 4px; font-size: 1.15rem; }
.survey-question-heading p { margin: 0; color: var(--muted, #667085); }
.survey-question-list { display: grid; gap: 15px; }
.survey-question-editor { padding: 18px; border: 1px solid #e1e5eb; border-radius: 14px; background: #fafbfc; }
.survey-question-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.survey-question-editor .form-grid { align-items: start; }
.survey-required-check { display: flex; align-items: center; gap: 8px; padding-top: 34px; }
.survey-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #e7e9ee; }
/* Shared public survey components are theme-neutral, with a restrained Caribbean variation below. */
.public-surveys { display: grid; gap: 14px; margin: 30px 0 12px; }
.public-survey-card { overflow: hidden; border: 1px solid #e4e2dd; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(34, 39, 48, .07); }
.public-survey-card > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; cursor: pointer; list-style: none; }
.public-survey-card > summary::-webkit-details-marker { display: none; }
.public-survey-invitation { display: flex; align-items: center; gap: 12px; min-width: 0; }
.public-survey-invitation > i { color: #9b4f3b; font-size: 1.25rem; }
.public-survey-invitation > span { display: grid; gap: 3px; }
.public-survey-invitation strong { color: #282c33; font-size: 1rem; }
.public-survey-invitation small { color: #727780; }
.public-survey-open { display: inline-flex; align-items: center; gap: 8px; color: #555e6a; font-size: .9rem; white-space: nowrap; }
.public-survey-card[open] .public-survey-open i { transform: rotate(180deg); }
.public-survey-body { padding: 0 20px 20px; border-top: 1px solid #eeece8; }
.public-survey-description { margin: 16px 0 0; color: #6b7078; font-style: italic; }
.public-survey-form { display: grid; gap: 17px; margin-top: 16px; }
.public-survey-question { min-width: 0; margin: 0; padding: 0 0 15px; border: 0; border-bottom: 1px solid #eeece8; }
.public-survey-question legend { float: none; width: 100%; margin-bottom: 10px; color: #30343b; font-size: .98rem; font-weight: 650; }
.survey-required-mark { color: #a04435; }
.public-survey-options { display: grid; gap: 8px; }
.public-survey-option { display: flex; align-items: flex-start; gap: 10px; width: fit-content; max-width: 100%; cursor: pointer; color: #454a52; }
.public-survey-option input { flex: 0 0 auto; margin-top: .2em; accent-color: #9b4f3b; }
.public-survey-text { width: 100%; max-width: 680px; padding: 10px 12px; border: 1px solid #d9dce1; border-radius: 9px; background: #fff; }
.public-survey-text:focus { outline: 3px solid rgba(93, 115, 144, .18); border-color: #74859a; }
.public-survey-hint { color: #737984; }
.public-survey-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.public-survey-submit-row > span { display: flex; align-items: center; gap: 7px; color: #747983; font-size: .82rem; }
.public-survey-submit { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 0; border-radius: 9px; background: #343b46; color: #fff; font-weight: 650; }
.public-survey-submit:hover { background: #222833; }
.public-survey-feedback { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border: 1px solid; border-radius: 10px; }
.public-survey-feedback.feedback-success { border-color: #b9dfc9; background: #eff9f2; color: #215f3a; }
.public-survey-feedback.feedback-error { border-color: #ebc7c2; background: #fff5f3; color: #813b32; }
.caribeno-surveys .public-survey-card { border-color: rgba(139, 107, 95, .28); border-radius: 9px; background: #fffdf9; box-shadow: 0 5px 18px rgba(55, 35, 25, .08); }
.caribeno-surveys .public-survey-invitation > i,
.caribeno-surveys .public-survey-option input { color: #8b5b48; accent-color: #8b5b48; }
.caribeno-surveys .public-survey-submit { background: #8b5b48; }
.caribeno-surveys .public-survey-submit:hover { background: #714634; }
.caribeno-surveys .public-survey-card > summary { color: #49372f; }
@media (max-width: 767.98px) {
    .survey-admin-card { align-items: stretch; flex-direction: column; gap: 14px; padding: 17px; }
    .survey-admin-actions { justify-content: flex-start; flex-wrap: wrap; }
    .survey-admin-actions .btn-responsive .btn-label { display: none; }
    .survey-admin-actions .btn-responsive { min-width: 42px; padding-inline: 10px; }
    .survey-question-heading { align-items: flex-start; flex-direction: column; }
    .survey-question-editor { padding: 14px; }
    .survey-results-summary { max-width: none; }
    .survey-round-history-list { display: grid; grid-template-columns: 1fr; }
    .survey-round-history-card { min-width: 0; }
    .survey-result-card { padding: 17px; }
    .survey-result-heading { flex-direction: column; gap: 10px; margin-bottom: 18px; }
    .survey-answered-count { align-self: flex-start; }
    .survey-required-check { padding-top: 6px; }
    .survey-form-actions { align-items: stretch; flex-direction: column; }
    .survey-form-actions .btn { align-self: flex-end; }
    .public-surveys { margin-top: 22px; }
    .public-survey-card > summary { align-items: flex-start; padding: 15px; }
    .public-survey-open { padding-top: 3px; font-size: .82rem; }
    .public-survey-body { padding: 0 15px 16px; }
    .public-survey-submit-row { align-items: stretch; flex-direction: column; }
    .public-survey-submit { justify-content: center; }
}

@media (max-width: 767.98px) {
    .currency-catalog-fields { grid-template-columns: 1fr 1fr; }
    .currency-catalog-form-panel { padding: 18px; }
    .currency-catalog-table tbody tr {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "currency currency" "symbol decimals" "usage status" "actions actions";
        gap: 12px 16px;
        border-left: 3px solid var(--orange);
    }
    .currency-catalog-table tbody td { min-width: 0; }
    .currency-catalog-table tbody td::before {
        display: block;
        margin-bottom: 4px;
        color: #778292;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .07em;
        line-height: 1.3;
        text-transform: uppercase;
        content: attr(data-label);
    }
    .currency-catalog-table .currency-catalog-name-cell { grid-area: currency; padding-bottom: 9px !important; border-bottom: 1px solid var(--line) !important; }
    .currency-catalog-table .currency-catalog-name strong { font-size: 15px; }
    .currency-catalog-table .currency-catalog-name span { font-size: 12px; }
    .currency-catalog-table .currency-catalog-symbol-cell { grid-area: symbol; }
    .currency-catalog-table .currency-catalog-decimals-cell { grid-area: decimals; }
    .currency-catalog-table .currency-catalog-usage-cell { grid-area: usage; }
    .currency-catalog-table .currency-catalog-status-cell { grid-area: status; }
    .currency-catalog-table .currency-catalog-decimals-cell > span,
    .currency-catalog-table .currency-catalog-usage-cell > span { font-weight: 700; color: var(--navy, #17243a); }
    .currency-catalog-table .currency-catalog-actions-cell { grid-area: actions; padding-top: 10px !important; border-top: 1px solid var(--line) !important; }
    .currency-catalog-table .admin-record-actions { justify-content: flex-end; gap: 8px; }
}

@media (max-width: 420px) {
    .currency-catalog-fields { grid-template-columns: 1fr; gap: .75rem; }
    .currency-catalog-section-heading { align-items: flex-start; }
    .currency-catalog-table-panel .currency-catalog-section-heading { padding: 17px 16px 14px; }
    .currency-catalog-form-actions .btn { width: 100%; justify-content: center; }
}

/* Currency-primary-change actions keep their icon and label visible on phones so each step stays explicit. */
@media (max-width: 575.98px) {
    .primary-currency-process-button {
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 40px;
        padding: .5rem .85rem !important;
        gap: .5rem;
        white-space: normal;
    }
    .primary-currency-process-button .btn-label {
        position: static !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        clip: auto !important;
        white-space: normal !important;
        border: 0 !important;
    }
    .primary-currency-change-footer,
    .primary-currency-preview-footer { flex-direction: column; align-items: stretch; }
    .primary-currency-change-footer .primary-currency-process-button,
    .primary-currency-preview-footer .primary-currency-process-button { width: 100% !important; justify-content: center; }
}

/* Anonymous customer opinions share behavior but receive a separate theme wrapper in both public menu designs. */
.public-opinions { --opinion-accent: #a84b3d; display: grid; gap: 16px; margin: 30px 0 18px; padding: 22px; border: 1px solid #e7e3df; border-radius: 16px; background: linear-gradient(145deg, #fff 0%, #faf9f7 100%); box-shadow: 0 10px 28px rgba(36, 40, 46, .08); }
.public-opinions.caribeno-opinions { --opinion-accent: var(--caribeno-accent, #a84b3d); }
.public-opinions-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--opinion-accent) 28%, #e8e5e1); }
.public-opinions-heading h2 { margin: 3px 0 4px; color: #252b32; font-size: 1.35rem; }
.public-opinions-heading p { margin: 0; color: #707780; font-size: .92rem; }
.public-opinions-eyebrow { color: var(--opinion-accent); font-size: .7rem; font-weight: 800; letter-spacing: .16em; }
.public-opinions-count { flex: 0 0 auto; color: #757b83; font-size: .84rem; }
.public-opinion-feedback { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 9px; font-size: .9rem; }
.public-opinion-feedback.feedback-success { color: #286243; background: #edf7f0; }
.public-opinion-feedback.feedback-error { color: #8b322e; background: #fff0ee; }
.public-opinion-form { display: grid; gap: 10px; padding: 16px; border: 1px solid #ebe7e2; border-radius: 12px; background: #fff; }
.public-opinion-rating { margin: 0; padding: 0; border: 0; }
.public-opinion-rating legend, .public-opinion-comment-label { margin-bottom: 7px; color: #30363d; font-size: .9rem; font-weight: 700; }
.public-opinion-stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 5px; width: fit-content; }
.public-opinion-stars input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.public-opinion-stars label { margin: 0; color: #c6c8cb; cursor: pointer; font-size: 1.35rem; transition: color .15s ease, transform .15s ease; }
.public-opinion-stars label:hover, .public-opinion-stars label:hover ~ label, .public-opinion-stars input:checked ~ label { color: #d39736; }
.public-opinion-stars label:hover { transform: translateY(-1px); }
.public-opinion-stars input:focus-visible + label { outline: 2px solid var(--opinion-accent); outline-offset: 3px; border-radius: 3px; }
.public-opinion-form textarea { width: 100%; min-height: 96px; padding: 11px 12px; border: 1px solid #d9dce0; border-radius: 9px; color: #30363d; font: inherit; resize: vertical; }
.public-opinion-form textarea:focus { border-color: var(--opinion-accent); outline: 3px solid color-mix(in srgb, var(--opinion-accent) 15%, transparent); }
.public-opinion-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
.public-opinion-submit-row > span { color: #6c747d; font-size: .8rem; }
.public-opinion-submit-row > span i { margin-right: 4px; }
.public-opinion-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 14px; border: 0; border-radius: 8px; background: var(--opinion-accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.public-opinion-submit:hover { filter: brightness(.93); }
.public-opinion-list { display: grid; gap: 10px; }
.public-opinion-card { padding: 14px 15px; border: 1px solid #ece9e5; border-radius: 11px; background: #fff; }
.public-opinion-card-head, .opinion-admin-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.opinion-stars { display: inline-flex; gap: 3px; color: #d39736; font-size: .88rem; }
.public-opinion-card time, .opinion-admin-card time { color: #858b92; font-size: .78rem; }
.public-opinion-card p { margin: 9px 0 0; color: #444b52; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-line; }
.public-opinion-empty { margin: 0; color: #747b83; font-size: .9rem; }
.public-opinion-pagination, .opinion-admin-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; color: #717880; font-size: .88rem; }
.public-opinion-pagination a { display: inline-flex; align-items: center; gap: 6px; color: var(--opinion-accent); font-weight: 700; text-decoration: none; }
.public-opinion-pagination a:hover { text-decoration: underline; }
.opinion-admin-list { display: grid; gap: 14px; }
.opinion-admin-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #e8eaed; }
.opinion-admin-heading h2 { margin: 0; font-size: 1.05rem; }
.opinion-admin-heading > span, .opinion-admin-edited { color: #777f89; font-size: .84rem; }
.opinion-admin-card { display: grid; gap: 10px; padding: 16px; border: 1px solid #e7e9ed; border-radius: 12px; background: #fff; }
.opinion-admin-comment { margin: 0; color: #3d4650; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-line; }
.opinion-admin-actions, .opinion-edit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.opinion-admin-actions form { margin: 0; }
.opinion-admin-empty { display: grid; justify-items: center; padding: 42px 16px; color: #737c86; text-align: center; }
.opinion-admin-empty > i { color: #8795a5; font-size: 2rem; }
.opinion-admin-empty h3 { margin: 10px 0 4px; color: #303a46; font-size: 1.05rem; }
.opinion-admin-empty p { margin: 0; }
.opinion-edit-panel { max-width: 760px; padding: 22px; }
.opinion-edit-actions { justify-content: flex-end; }
.opinion-admin-pagination { justify-content: space-between; margin-top: 16px; }
@media (max-width: 600px) {
    .public-opinions { gap: 13px; margin: 22px 0 14px; padding: 15px; border-radius: 13px; }
    .public-opinions-heading { align-items: flex-start; }
    .public-opinions-heading h2 { font-size: 1.15rem; }
    .public-opinions-heading p { font-size: .84rem; }
    .public-opinions-count { max-width: 76px; text-align: right; }
    .public-opinion-form { padding: 13px; }
    .public-opinion-submit-row { align-items: flex-start; }
    .public-opinion-submit-row > span { max-width: 58%; line-height: 1.4; }
    .public-opinion-submit { min-width: 42px; padding: 9px 12px; }
    .opinion-admin-card { padding: 13px; }
    .opinion-admin-pagination { gap: 8px; font-size: .82rem; }
}

/* Restaurant opinion administration: compact review cards with clear rating, timestamp and moderation actions. */
.opinion-admin-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 20px; }
.opinion-summary-card { display: flex; align-items: center; gap: 13px; min-width: 0; padding: 16px 18px; border: 1px solid #e6e9ee; border-radius: 13px; background: #fff; box-shadow: 0 5px 16px rgba(30, 42, 58, .045); }
.opinion-summary-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 11px; background: #edf3f9; color: #55718f; font-size: 1.05rem; }
.opinion-summary-rating { background: #fff5e5; color: #c58627; }
.opinion-summary-public { background: #edf6f0; color: #3d7959; }
.opinion-summary-card > div { display: grid; gap: 3px; min-width: 0; }
.opinion-summary-card small { color: #737d89; font-size: .77rem; }
.opinion-summary-card strong { color: #253142; font-size: 1.35rem; line-height: 1.1; }
.opinion-summary-card strong span { color: #87909a; font-size: .75rem; font-weight: 500; }
.opinion-admin-list { gap: 12px; padding: 20px; }
.opinion-admin-heading { align-items: center; padding: 2px 1px 14px; }
.opinion-admin-heading h2 { color: #253142; font-size: 1.1rem; }
.opinion-admin-heading p { margin: 4px 0 0; color: #7b8490; font-size: .82rem; }
.opinion-page-indicator { padding: 6px 10px; border: 1px solid #e5e8ec; border-radius: 20px; background: #f8f9fb; color: #687381; font-size: .78rem; white-space: nowrap; }
.opinion-admin-card { gap: 13px; padding: 17px 18px; border-color: #e8ebef; border-radius: 13px; box-shadow: 0 3px 12px rgba(34, 46, 61, .035); transition: border-color .15s ease, box-shadow .15s ease; }
.opinion-admin-card:hover { border-color: #d6dce4; box-shadow: 0 7px 18px rgba(34, 46, 61, .07); }
.opinion-admin-card-head { align-items: center; }
.opinion-author { display: flex; align-items: center; gap: 10px; min-width: 0; }
.opinion-anonymous-avatar { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid #e5e8ec; border-radius: 50%; background: #f5f7f9; color: #69788a; font-size: 1rem; }
.opinion-author > span:last-child { display: grid; gap: 2px; }
.opinion-author strong { color: #2d3745; font-size: .87rem; }
.opinion-author small { color: #89919a; font-size: .73rem; }
.opinion-admin-card-head time { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.opinion-admin-rating { display: flex; align-items: center; gap: 9px; }
.opinion-admin-rating > strong { color: #46515f; font-size: .82rem; }
.opinion-admin-rating > strong span { color: #9299a1; font-weight: 500; }
.opinion-admin-edited { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 20px; background: #f2f4f7; font-size: .7rem; }
.opinion-admin-comment { padding: 0 1px; color: #3e4854; font-size: .94rem; line-height: 1.65; }
.opinion-admin-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 11px; border-top: 1px solid #eef0f2; }
.opinion-admin-card-footer > small { color: #87909a; font-size: .75rem; }
.opinion-admin-card-footer > small i { margin-right: 4px; color: #5a8a6c; }
.opinion-admin-actions { gap: 8px; }
.opinion-admin-pagination { padding: 4px 2px; }
@media (max-width: 760px) {
    .opinion-admin-summary { grid-template-columns: 1fr; gap: 9px; margin-bottom: 14px; }
    .opinion-summary-card { padding: 11px 13px; }
    .opinion-summary-icon { flex-basis: 36px; width: 36px; height: 36px; }
    .opinion-summary-card strong { font-size: 1.15rem; }
    .opinion-admin-list { gap: 10px; padding: 14px; }
    .opinion-admin-heading { align-items: flex-start; }
    .opinion-admin-card { gap: 11px; padding: 13px; }
    .opinion-admin-card-head { align-items: flex-start; }
    .opinion-admin-card-head time { max-width: 125px; justify-content: flex-end; font-size: .7rem; text-align: right; white-space: normal; }
    .opinion-admin-card-footer { align-items: flex-end; }
    .opinion-admin-card-footer > small { max-width: 45%; line-height: 1.35; }
    .opinion-admin-actions .btn-responsive { min-width: 40px; padding-inline: 9px; }
    .opinion-admin-actions .btn-responsive .btn-label { display: none; }
}
@media (max-width: 420px) {
    .opinion-admin-heading { flex-direction: column; gap: 8px; }
    .opinion-admin-card-footer { flex-direction: column; align-items: stretch; }
    .opinion-admin-card-footer > small { max-width: none; }
    .opinion-admin-actions { justify-content: flex-end; }
    .opinion-admin-pagination { justify-content: space-between; }
}

/* Public contact footer uses shared structure with restrained colors for the neutral and Caribbean menu themes. */
.restaurant-contact-footer { --contact-accent: #8d594d; display: grid; gap: 18px; margin: 34px auto 18px; padding: 24px; border: 1px solid #e6e1dc; border-radius: 16px; background: linear-gradient(145deg, #fff 0%, #f8f7f5 100%); box-shadow: 0 10px 28px rgba(36, 40, 46, .08); }
.caribeno-contact-footer { --contact-accent: #d5a45a; border-color: rgba(213,164,90,.32); background: linear-gradient(145deg, #182d39 0%, #10232d 100%); color: #f7f1e6; }
.restaurant-contact-heading { display: flex; align-items: center; gap: 13px; }
.restaurant-contact-mark { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--contact-accent) 13%, #fff); color: var(--contact-accent); font-size: 1.05rem; }
.caribeno-contact-footer .restaurant-contact-mark { background: rgba(213,164,90,.16); }
.restaurant-contact-eyebrow { color: var(--contact-accent); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.restaurant-contact-heading h2 { margin: 2px 0 0; color: #27323b; font-size: 1.25rem; }
.caribeno-contact-footer .restaurant-contact-heading h2 { color: #fff8e9; }
.restaurant-footer-message { margin: -4px 0 0; color: #7c6860; font-size: .94rem; font-style: italic; line-height: 1.55; }
.caribeno-contact-footer .restaurant-footer-message { color: #e2d7c5; }
.restaurant-contact-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.restaurant-contact-item { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 12px; border: 1px solid #ece8e3; border-radius: 11px; background: rgba(255,255,255,.72); }
.caribeno-contact-footer .restaurant-contact-item { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.055); }
.restaurant-contact-item > i { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--contact-accent) 14%, #fff); color: var(--contact-accent); font-size: 1rem; }
.caribeno-contact-footer .restaurant-contact-item > i { background: rgba(213,164,90,.15); }
.restaurant-contact-item > div { display: grid; gap: 3px; flex: 1 1 auto; min-width: 0; }
.restaurant-contact-item small { color: #8a9096; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.restaurant-contact-item > div > span { overflow-wrap: anywhere; color: #35414a; font-size: .86rem; line-height: 1.35; }
.caribeno-contact-footer .restaurant-contact-item > div > span { color: #f2eee6; }
.caribeno-contact-footer .restaurant-contact-item small { color: #c1b7a7; }
.restaurant-contact-link { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; color: var(--contact-accent); font-size: .78rem; font-weight: 700; text-decoration: none; }
.restaurant-contact-map-links { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 12px; flex: 0 0 auto; }
.restaurant-contact-link:hover { color: color-mix(in srgb, var(--contact-accent) 75%, #171717); text-decoration: underline; }
.caribeno-contact-footer .restaurant-contact-link:hover { color: #f5d28d; }
@media (max-width: 600px) {
    .restaurant-contact-footer { gap: 14px; margin: 24px auto 14px; padding: 16px; border-radius: 13px; }
    .restaurant-contact-items { grid-template-columns: 1fr; gap: 8px; }
    .restaurant-contact-item { padding: 10px; }
    .contact-link-label { display: none; }
    .restaurant-contact-link { min-width: 34px; min-height: 34px; justify-content: center; border: 1px solid color-mix(in srgb, var(--contact-accent) 25%, transparent); border-radius: 8px; }
}

/* Restaurant profile editor: grouped form sections and spacing tuned for narrow screens. */
.restaurant-profile-page-head { align-items: center; }
.restaurant-profile-page-head .page-head p { max-width: 680px; line-height: 1.55; }
.restaurant-profile-shell { max-width: 980px; margin: 0 auto 28px; overflow: hidden; border-color: #e3e8ed; box-shadow: 0 14px 38px rgba(20, 35, 52, .075); }
.restaurant-profile-intro { display: flex; align-items: center; gap: 17px; padding: 23px 27px; border-bottom: 1px solid #e8edf1; background: linear-gradient(110deg, #f7f9fb 0%, #fff 75%); }
.restaurant-profile-icon { display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; border: 1px solid #e4eaf0; border-radius: 15px; background: #fff; color: #526f8b; font-size: 1.35rem; box-shadow: 0 5px 14px rgba(30, 52, 72, .07); }
.restaurant-profile-intro h2 { margin: 0 0 5px; color: #263445; font-size: 1.2rem; font-weight: 750; }
.restaurant-profile-intro p { margin: 0; color: #737f8b; font-size: .88rem; line-height: 1.5; }
.restaurant-profile-form { display: grid; gap: 16px; padding: 24px 27px 26px; }
.restaurant-profile-section { padding: 19px 20px 21px; border: 1px solid #e8ecf0; border-radius: 13px; background: #fff; }
.restaurant-profile-section-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.restaurant-profile-section-icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: #f1f5f8; color: #627b94; font-size: .95rem; }
.restaurant-profile-section-heading h3 { margin: 0 0 3px; color: #2d3b4a; font-size: .98rem; font-weight: 750; }
.restaurant-profile-section-heading p { margin: 0; color: #808a94; font-size: .8rem; line-height: 1.45; }
.restaurant-profile-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px 19px; }
.restaurant-profile-fields > div { min-width: 0; }
.restaurant-profile-fields .profile-field-full { grid-column: 1 / -1; }
.restaurant-profile-form .form-label { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; color: #465464; font-size: .8rem; font-weight: 700; }
.restaurant-profile-form .form-control { min-height: 43px; border-color: #dce2e8; border-radius: 9px; padding: 10px 12px; color: #2f3b48; font-size: .9rem; }
.restaurant-profile-form textarea.form-control { min-height: 104px; resize: vertical; }
.restaurant-profile-form .form-control::placeholder { color: #a0a8b0; }
.restaurant-profile-form .form-control:focus { border-color: #839bb2; box-shadow: 0 0 0 3px rgba(91, 121, 150, .12); }
.restaurant-profile-form .form-text { display: block; margin-top: 6px; color: #7c8792; font-size: .75rem; line-height: 1.45; }
.restaurant-profile-form .text-danger { display: block; margin-top: 5px; font-size: .76rem; }
.profile-optional { padding: 2px 7px; border-radius: 20px; background: #f2f4f6; color: #818a93; font-size: .65rem; font-weight: 600; }
.profile-map-hint { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid #e5ebf1; border-radius: 9px; background: #f7f9fb; color: #657585; font-size: .77rem; line-height: 1.5; }
.profile-map-hint i { flex: 0 0 auto; margin-top: 1px; color: #6686a3; }
.restaurant-profile-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 6px 2px 0; }
.restaurant-profile-actions > span { display: inline-flex; align-items: center; gap: 7px; color: #77828d; font-size: .78rem; line-height: 1.4; }
.restaurant-profile-actions > span i { color: #5d8c6c; }
.restaurant-profile-actions .btn { min-height: 42px; padding-inline: 16px; }
@media (max-width: 760px) {
    .restaurant-profile-shell { margin-bottom: 18px; }
    .restaurant-profile-intro { padding: 19px 20px; }
    .restaurant-profile-form { gap: 12px; padding: 18px 20px 20px; }
    .restaurant-profile-section { padding: 16px; }
}
@media (max-width: 600px) {
    .restaurant-profile-page-head { gap: 12px; margin-bottom: 17px; }
    .restaurant-profile-page-head h1 { font-size: 25px; }
    .restaurant-profile-page-head p { max-width: 100%; font-size: .83rem; }
    .restaurant-profile-shell { border-radius: 12px; }
    .restaurant-profile-intro { align-items: flex-start; gap: 12px; padding: 16px; }
    .restaurant-profile-icon { flex-basis: 42px; width: 42px; height: 42px; border-radius: 12px; font-size: 1.1rem; }
    .restaurant-profile-intro h2 { font-size: 1.02rem; }
    .restaurant-profile-intro p { font-size: .8rem; }
    .restaurant-profile-form { gap: 10px; padding: 12px; }
    .restaurant-profile-section { padding: 14px 13px; border-radius: 11px; }
    .restaurant-profile-section-heading { align-items: flex-start; gap: 9px; margin-bottom: 14px; }
    .restaurant-profile-section-icon { flex-basis: 32px; width: 32px; height: 32px; border-radius: 9px; font-size: .85rem; }
    .restaurant-profile-section-heading h3 { font-size: .91rem; }
    .restaurant-profile-section-heading p { font-size: .74rem; }
    .restaurant-profile-fields { grid-template-columns: 1fr; gap: 12px; }
    .restaurant-profile-fields .profile-field-full { grid-column: auto; }
    .restaurant-profile-form .form-label { font-size: .77rem; }
    .restaurant-profile-form .form-control { min-height: 44px; padding: 10px 11px; font-size: 16px; }
    .restaurant-profile-form textarea.form-control { min-height: 92px; }
    .restaurant-profile-form .form-text { font-size: .72rem; }
    .restaurant-profile-actions { align-items: flex-end; gap: 10px; padding: 3px 1px 0; }
    .restaurant-profile-actions > span { max-width: calc(100% - 54px); align-items: flex-start; font-size: .72rem; }
    .restaurant-profile-actions .btn-responsive { flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; }
    .restaurant-profile-actions .btn-label { display: none; }
    .restaurant-profile-page-head > .btn-responsive { align-self: flex-end; flex: 0 0 42px; width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 0; }
    .restaurant-profile-page-head > .btn-responsive .btn-label { display: none; }
}
@media (max-width: 380px) {
    .restaurant-profile-page-head h1 { font-size: 22px; }
    .restaurant-profile-intro { padding: 14px 12px; }
    .restaurant-profile-form { padding: 9px; }
    .restaurant-profile-section { padding: 12px 10px; }
    .profile-map-hint { padding: 9px; font-size: .72rem; }
}

/* Restaurant dashboard shortcuts mirror the sidebar groups and expose only granted customer modules. */
.dashboard-shortcuts { display: grid; gap: 20px; margin-top: 26px; }
.dashboard-shortcuts-heading { display: flex; align-items: flex-end; justify-content: space-between; }
.dashboard-shortcuts-heading h2 { margin: 5px 0 3px; color: var(--navy); font-size: 21px; font-weight: 800; }
.dashboard-shortcuts-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.dashboard-access-group { display: grid; gap: 10px; }
.dashboard-access-group > h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: #536276; font-size: 12px; font-weight: 800; }
.dashboard-access-group > h3 > i { color: var(--orange); font-size: 14px; }
.dashboard-access-group .quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.dashboard-access-group .quick-card { min-height: 78px; padding: 14px; gap: 11px; border-radius: 12px; box-shadow: 0 4px 12px rgba(13, 27, 46, .025); }
.dashboard-access-group .quick-card > i:first-child { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: #f7f1eb; color: var(--orange); font-size: 17px; }
.dashboard-access-group .quick-card > div { min-width: 0; flex: 1 1 auto; }
.dashboard-access-group .quick-card strong { color: #25354a; font-size: 11px; line-height: 1.35; }
.dashboard-access-group .quick-card span { color: #778292; font-size: 9px; line-height: 1.35; }
.dashboard-access-group .quick-card > .quick-card-arrow { flex: 0 0 auto; width: auto; margin-left: auto; color: #a0a9b3; font-size: 12px; }
.dashboard-access-group .quick-card:hover { border-color: #d6b89e; background: #fffdfa; box-shadow: 0 8px 20px rgba(13, 27, 46, .07); }
.nav-menu > .nav-label { margin-top: 4px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.055); }
.nav-menu > .nav-label:first-of-type { border-top: 0; }
@media (max-width: 900px) {
    .dashboard-access-group .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .dashboard-shortcuts { gap: 17px; margin-top: 21px; }
    .dashboard-shortcuts-heading h2 { font-size: 18px; }
    .dashboard-access-group { gap: 8px; }
    .dashboard-access-group > h3 { font-size: 11px; }
    .dashboard-access-group .quick-grid { grid-template-columns: repeat(auto-fill, 52px); gap: 8px; }
    .dashboard-access-group .quick-card { display: grid; place-items: center; width: 52px; min-width: 52px; height: 52px; min-height: 52px; padding: 0; border-radius: 12px; }
    .dashboard-access-group .quick-card > i:first-child { width: 100%; height: 100%; border-radius: inherit; background: transparent; font-size: 20px; }
    .dashboard-access-group .quick-card > div,
    .dashboard-access-group .quick-card > .quick-card-arrow { display: none; }
}

/* Contextual help dialog: focused, accessible guidance that stays readable on desktop and mobile. */
.page-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex: 0 0 auto; }
.context-help { position: relative; z-index: 30; flex: 0 0 auto; }
.context-help-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; list-style: none; min-height: 40px; cursor: pointer; }
.context-help-toggle:focus-visible { outline: 3px solid rgba(83, 113, 143, .24); outline-offset: 2px; }
.context-help-dialog { width: min(620px, calc(100vw - 32px)); max-width: 620px; max-height: min(84vh, 760px); padding: 0; overflow: hidden; border: 1px solid #dce3e9; border-radius: 17px; background: #fff; color: var(--ink); box-shadow: 0 24px 80px rgba(18, 34, 52, .28); }
.context-help-dialog[open] { animation: context-help-enter .18s ease-out; }
.context-help-dialog::backdrop { background: rgba(23, 34, 47, .54); backdrop-filter: blur(2px); }
.context-help-dialog-shell { display: flex; flex-direction: column; max-height: min(84vh, 760px); }
.context-help-dialog-header { position: relative; display: flex; align-items: flex-start; gap: 13px; padding: 23px 25px 19px; border-bottom: 1px solid #ebeff2; background: linear-gradient(135deg, #f5f8fa 0%, #fff 78%); }
.context-help-icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: #f0f4f7; color: #58728b; font-size: 1rem; }
.context-help-heading { min-width: 0; padding-right: 25px; }
.context-help-eyebrow { color: #8592a0; font-size: .65rem; font-weight: 800; letter-spacing: .12em; }
.context-help-heading h2 { margin: 3px 0 6px; color: #293848; font-size: 1.17rem; font-weight: 800; }
.context-help-heading p { margin: 0; color: #6d7783; font-size: .82rem; line-height: 1.5; }
.context-help-close { position: absolute; top: 17px; right: 17px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #e1e6ea; border-radius: 9px; background: #fff; color: #667382; cursor: pointer; }
.context-help-close:hover { background: #f1f4f6; color: #293848; }
.context-help-content { padding: 20px 25px; overflow-y: auto; }
.context-help-content h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: #39495a; font-size: .88rem; font-weight: 800; }
.context-help-content h3 > i { color: #71879b; }
.context-help-content ol, .context-help-content ul { display: grid; gap: 10px; margin: 0; padding-left: 1.5rem; color: #515c68; font-size: .84rem; line-height: 1.55; }
.context-help-content li { padding-left: 2px; }
.context-help-important { display: flex; align-items: flex-start; gap: 10px; margin-top: 17px; padding: 13px 14px; border: 1px solid #f0dfc7; border-radius: 11px; background: #fff9f0; color: #76552b; }
.context-help-important > i { flex: 0 0 auto; margin-top: 2px; color: #bd7a26; }
.context-help-important p { margin: 0; font-size: .82rem; line-height: 1.55; }
.context-help-tips { margin-top: 19px; padding-top: 16px; border-top: 1px solid #edf0f2; }
.context-help-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 25px; border-top: 1px solid #ebeff2; background: #fafbfc; }
.context-help-dialog-footer > span { display: inline-flex; align-items: center; gap: 7px; color: #7c8792; font-size: .73rem; }
.context-help-dialog-footer > span i { color: #71879b; }
.context-help-dialog-footer .btn { min-height: 40px; }
@keyframes context-help-enter { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 900px) {
    .page-head-actions { align-self: flex-start; }
}
@media (max-width: 575.98px) {
    .page-head-actions { align-self: flex-end; gap: 7px; }
    .context-help-toggle { min-width: 40px; width: 40px; min-height: 40px; padding: 0; }
    .context-help-toggle .btn-label { display: none; }
    .context-help-dialog { width: calc(100vw - 24px); max-height: 88vh; border-radius: 14px; }
    .context-help-dialog-shell { max-height: 88vh; }
    .context-help-dialog-header { gap: 10px; padding: 18px 16px 15px; }
    .context-help-icon { flex-basis: 32px; width: 32px; height: 32px; }
    .context-help-heading { padding-right: 22px; }
    .context-help-heading h2 { font-size: 1.03rem; }
    .context-help-heading p { font-size: .78rem; }
    .context-help-close { top: 11px; right: 11px; width: 31px; height: 31px; }
    .context-help-content { padding: 16px; }
    .context-help-content ol, .context-help-content ul { gap: 8px; font-size: .79rem; }
    .context-help-dialog-footer { padding: 11px 16px; }
    .context-help-dialog-footer > span { max-width: 65%; font-size: .68rem; }
    .context-help-dialog-footer .btn-responsive { flex: 0 0 40px; width: 40px; min-width: 40px; height: 40px; padding: 0; }
    .context-help-dialog-footer .btn-label { display: none; }
}

/* Job-offer administration and public pages share the app's existing neutral/Caribbean brand tokens. */
.job-admin-list { display: grid; gap: 13px; }
.job-admin-card { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 20px 22px; border-color: #e5e9ed; border-radius: 14px; box-shadow: 0 8px 22px rgba(20, 35, 52, .045); }
.job-admin-card-main { min-width: 0; }
.job-admin-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.job-admin-title-row h2 { margin: 0; color: #293848; font-size: 1.05rem; font-weight: 800; }
.job-admin-state { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font-size: .69rem; font-weight: 800; }
.job-admin-state.is-published { background: #e9f5ed; color: #34744e; }
.job-admin-state.is-paused { background: #f1f3f5; color: #74808b; }
.job-admin-card-main > p { display: -webkit-box; margin: 9px 0 6px; overflow: hidden; color: #5f6b77; font-size: .85rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.job-admin-card-main > small { color: #87919b; font-size: .73rem; }
.job-admin-card-main > small i { margin-right: 3px; }
.job-admin-view-count { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; color: #667585; font-size: .74rem; font-weight: 750; cursor: help; }
.job-admin-view-count i { color: #7b90a3; }
.job-admin-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.job-admin-empty { display: grid; justify-items: center; gap: 9px; padding: 38px 24px; text-align: center; }
.job-admin-empty > i { color: #8b9baa; font-size: 2rem; }
.job-admin-empty h2 { margin: 0; color: #293848; font-size: 1.05rem; font-weight: 800; }
.job-admin-empty p { max-width: 470px; margin: 0 0 7px; color: #737f8b; font-size: .84rem; line-height: 1.5; }
.job-offer-form-panel { max-width: 900px; margin-inline: auto; padding: 24px; }
.job-offer-form-intro, .job-offer-contact-note { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 19px; padding: 12px 14px; border: 1px solid #e3eaf0; border-radius: 10px; background: #f7f9fb; color: #637486; }
.job-offer-form-intro > i, .job-offer-contact-note > i { flex: 0 0 auto; margin-top: 2px; color: #6d849a; }
.job-offer-form-intro p { margin: 0; font-size: .81rem; line-height: 1.5; }
.job-offer-form-panel textarea.form-control { min-height: 90px; resize: vertical; }
.job-offer-contact-note { margin: 19px 0 0; background: #fffdfa; border-color: #eee5d9; color: #746c63; font-size: .78rem; line-height: 1.5; }
.job-offer-contact-note > i { color: #a87c4f; }
.job-offer-form-actions { justify-content: flex-end; margin-top: 18px; }
.public-job-offers-callout { --job-offer-accent: var(--menu-accent, #8d594d); display: flex; align-items: center; gap: 12px; margin: 10px 0 17px; padding: 13px 16px 13px 13px; border: 1px solid color-mix(in srgb, var(--job-offer-accent) 30%, #fff); border-left: 4px solid var(--job-offer-accent); border-radius: 12px; background: linear-gradient(105deg, color-mix(in srgb, var(--job-offer-accent) 12%, #fff), #fff 82%); color: #303b45; text-decoration: none; box-shadow: 0 8px 20px rgba(32, 38, 46, .09); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.public-job-offers-callout:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--job-offer-accent) 48%, #fff); box-shadow: 0 10px 23px rgba(32, 38, 46, .1); color: #26313b; }
.caribeno-job-offers-callout { --job-offer-accent: #b58339; border-color: rgba(181,131,57,.38); border-left-color: #b58339; background: linear-gradient(105deg, rgba(213,164,90,.2), #fffdf8 82%); }
.public-job-offers-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid color-mix(in srgb, var(--job-offer-accent) 25%, #fff); border-radius: 11px; background: color-mix(in srgb, var(--job-offer-accent) 18%, #fff); color: var(--job-offer-accent); font-size: 1.2rem; }
.public-job-offers-copy { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.public-job-offers-copy small { color: var(--job-offer-accent); font-size: .61rem; font-weight: 850; letter-spacing: .12em; line-height: 1.35; }
.public-job-offers-copy strong { color: #303b45; font-size: .9rem; font-weight: 850; }
.public-job-offers-copy > span { color: #737f8b; font-size: .74rem; line-height: 1.4; }
.public-job-offers-link { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 8px 11px; border: 1px solid color-mix(in srgb, var(--job-offer-accent) 22%, #fff); border-radius: 9px; background: color-mix(in srgb, var(--job-offer-accent) 8%, #fff); color: var(--job-offer-accent); font-size: .78rem; font-weight: 800; }
.job-offers-page { min-height: 100vh; }
.job-offers-content { max-width: 980px; padding-top: 23px; padding-bottom: 42px; }
.job-offers-back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 20px; color: #657383; font-size: .83rem; font-weight: 700; text-decoration: none; }
.job-offers-back:hover { color: var(--menu-accent, #8d594d); text-decoration: underline; }
.job-offers-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 19px 21px; border: 1px solid #e5e9ed; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(20, 35, 52, .05); }
.job-offers-heading-icon { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 13px; background: color-mix(in srgb, var(--menu-accent, #8d594d) 12%, #fff); color: var(--menu-accent, #8d594d); font-size: 1.3rem; }
.job-offers-eyebrow { color: var(--menu-accent, #8d594d); font-size: .66rem; font-weight: 800; letter-spacing: .13em; }
.job-offers-heading h2 { margin: 2px 0 4px; color: #293848; font-size: 1.35rem; font-weight: 800; }
.job-offers-heading p { margin: 0; color: #73808d; font-size: .83rem; }
.job-offer-public-list { display: grid; gap: 13px; }
.job-offer-public-card { padding: 20px 22px; border: 1px solid #e5e9ed; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(20, 35, 52, .055); }
.job-offer-public-card h3 { margin: 0 0 10px; color: #293848; font-size: 1.13rem; font-weight: 800; }
.job-offer-public-card-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.job-offer-public-card-heading h3 { margin-bottom: 10px; }
.job-offer-public-card-heading time { margin-bottom: 10px; color: #8a949d; font-size: .7rem; font-weight: 700; }
.job-offer-public-views { display: inline-flex; align-items: center; gap: 5px; margin: -3px 0 9px; padding: 4px 8px; border: 1px solid #e8edf1; border-radius: 999px; background: #f7f9fb; color: #6b7885; font-size: .68rem; font-weight: 750; cursor: help; }
.job-offer-public-views i { color: var(--menu-accent, #8d594d); }
.job-offer-public-description, .job-offer-detail p { margin: 0; color: #576471; font-size: .88rem; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.job-offer-detail { margin-top: 15px; padding-top: 13px; border-top: 1px solid #edf0f2; }
.job-offer-detail h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; color: #475563; font-size: .78rem; font-weight: 800; }
.job-offer-detail h4 i { color: var(--menu-accent, #8d594d); }
.job-offer-contact { display: flex; align-items: flex-start; gap: 14px; margin-top: 17px; padding: 19px 21px; border: 1px solid color-mix(in srgb, var(--menu-accent, #8d594d) 22%, #fff); border-radius: 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--menu-accent, #8d594d) 7%, #fff), #fff 80%); }
.job-offer-contact-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--menu-accent, #8d594d) 13%, #fff); color: var(--menu-accent, #8d594d); font-size: 1.1rem; }
.job-offer-contact-copy { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.job-offer-contact-copy h2 { margin: 0; color: #303b45; font-size: .98rem; font-weight: 800; }
.job-offer-contact-copy p { margin: 0; color: #697582; font-size: .81rem; line-height: 1.5; }
.job-offer-phone { display: inline-block; color: #303b45; font-size: 1.04rem; letter-spacing: .02em; user-select: text; }
.caribeno-job-offers-callout .public-job-offers-copy strong { color: #34312b; }
.caribeno-job-offers-callout .public-job-offers-link { border-color: rgba(181,131,57,.24); background: rgba(213,164,90,.14); color: #9a6d2b; }
.caribeno-menu .job-offers-heading, .caribeno-menu .job-offer-public-card { border-color: rgba(181,131,57,.24); box-shadow: 0 9px 25px rgba(57, 42, 28, .08); }
.caribeno-menu .job-offer-public-card h3, .caribeno-menu .job-offers-heading h2 { color: #43352e; font-family: 'Cormorant Garamond', Georgia, serif; }
.caribeno-menu .job-offer-public-views { border-color: rgba(181,131,57,.22); background: rgba(213,164,90,.12); color: #75624a; }
.caribeno-menu .job-offer-public-views i { color: #9a6d2b; }
.caribeno-menu .job-offer-contact { border-color: rgba(181,131,57,.3); background: linear-gradient(120deg, rgba(213,164,90,.12), #fffdf8 82%); }
@media (max-width: 760px) {
    .job-admin-card { align-items: stretch; flex-direction: column; gap: 14px; padding: 16px; }
    .job-admin-actions { justify-content: flex-end; padding-top: 12px; border-top: 1px solid #edf0f2; }
    .job-admin-actions .btn-responsive { min-width: 42px; width: 42px; height: 42px; padding: 0; }
    .job-admin-actions .btn-label { display: none; }
    .job-offer-form-panel { padding: 18px; }
}
@media (max-width: 575.98px) {
    .public-job-offers-callout { align-items: flex-start; gap: 9px; margin: 8px 0 13px; padding: 11px; border-radius: 10px; }
    .public-job-offers-icon { flex-basis: 36px; width: 36px; height: 36px; border-radius: 9px; font-size: 1rem; }
    .public-job-offers-copy small { font-size: .55rem; }
    .public-job-offers-copy strong { font-size: .8rem; line-height: 1.3; }
    .public-job-offers-copy > span { font-size: .66rem; }
    .public-job-offers-link { align-self: center; gap: 3px; padding: 7px 8px; font-size: .66rem; white-space: nowrap; }
    .job-offers-content { padding: 15px 13px 28px; }
    .job-offers-back { margin-bottom: 13px; font-size: .76rem; }
    .job-offers-heading { align-items: flex-start; gap: 10px; margin-bottom: 12px; padding: 15px 13px; border-radius: 12px; }
    .job-offers-heading-icon { flex-basis: 39px; width: 39px; height: 39px; border-radius: 10px; font-size: 1.05rem; }
    .job-offers-heading h2 { font-size: 1.12rem; }
    .job-offers-heading p { font-size: .75rem; }
    .job-offer-public-list { gap: 10px; }
    .job-offer-public-card { padding: 15px; border-radius: 12px; }
    .job-offer-public-card h3 { font-size: 1rem; }
    .job-offer-public-description, .job-offer-detail p { font-size: .81rem; }
    .job-offer-contact { gap: 10px; margin-top: 12px; padding: 15px 13px; border-radius: 12px; }
    .job-offer-contact-icon { flex-basis: 35px; width: 35px; height: 35px; border-radius: 9px; }
    .job-offer-contact-copy h2 { font-size: .88rem; }
    .job-offer-contact-copy p { font-size: .74rem; }
    .job-offer-phone { font-size: .97rem; }
    .job-offer-form-panel { padding: 13px; }
    .job-offer-form-panel .form-control { font-size: 16px; }
    .job-offer-form-actions { justify-content: space-between; gap: 9px; }
    .job-offer-form-actions .btn-responsive { flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; padding: 0; }
    .job-offer-form-actions .btn-label { display: none; }
}