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

body{
    background:#f5f7fb;
    font-family:Arial, Helvetica, sans-serif;
}

.contenedor{
    width:100%;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:20px;
}

h1{
    color:#2563eb;
    font-size:48px;
}

p{
    margin-top:15px;
    color:#555;
    font-size:20px;
}

button{
    margin-top:30px;
    background:#2563eb;
    color:white;
    border:none;
    padding:15px 35px;
    border-radius:8px;
    font-size:18px;
    cursor:pointer;
}

button:hover{
    background:#1d4ed8;
}.menu{
    margin-top:40px;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.boton{
    width:100%;
    max-width:260px;
    text-align:center;
    text-decoration:none;
    background:#2563eb;
    color:#fff;
    padding:16px;
    border-radius:10px;
    font-size:20px;
    font-weight:bold;
    transition:.3s;
}

.boton:hover{
    background:#1d4ed8;
    transform:scale(1.03);
}

.secundario{
    background:#10b981;
}

.secundario:hover{
    background:#059669;
}.opciones{
    margin-top:35px;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.opciones label{
    width:100%;
    max-width:420px;
    padding:18px;
    display:flex;
    align-items:center;
    border:2px solid #ddd;
    border-radius:10px;
    cursor:pointer;
    font-size:20px;
    background:#fff;
    transition:.3s;
}

.opciones label:hover{
    border-color:#2563eb;
    background:#eef4ff;
}

.opciones input{
    margin-right:12px;
}/*============================*/

.contenedor-form{

width:550px;

margin:40px auto;

background:white;

padding:35px;

border-radius:15px;

box-shadow:0px 5px 20px rgba(0,0,0,.08);

}

.contenedor-form h1{

color:#2563eb;

margin-bottom:10px;

}

.contenedor-form p{

margin-bottom:25px;

color:#666;

}

.grupo{

margin-bottom:20px;

}

.grupo label{

display:block;

margin-bottom:8px;

font-weight:bold;

}

.grupo input{

width:100%;

padding:14px;

font-size:16px;

border:1px solid #ddd;

border-radius:8px;

}

.grupo textarea{

width:100%;

padding:14px;

font-size:16px;

border:1px solid #ddd;

border-radius:8px;

resize:none;

}

.contenedor-form button{

width:100%;

padding:16px;

background:#2563eb;

color:white;

border:none;

border-radius:8px;

font-size:18px;

cursor:pointer;

}

.contenedor-form button:hover{

background:#1d4ed8;

}

/* ============================================================
   Identidad visual corporativa ENVIOSPRO (Fase 16)
   Paleta: blanco / gris claro / gris oscuro + azul moderado.
   Se suma a los estilos existentes de arriba sin quitarlos ni
   depender de un framework adicional a Bootstrap 5.
   ============================================================ */

:root{
    --ep-azul: #2563eb;
    --ep-azul-oscuro: #1d4ed8;
    --ep-gris-100: #f5f7fb;
    --ep-gris-200: #e5e7eb;
    --ep-gris-500: #6b7280;
    --ep-gris-800: #1f2937;
    --ep-radio: 10px;
    --ep-radio-sm: 8px;
}

.ep-card{
    border: 1px solid var(--ep-gris-200);
    border-radius: var(--ep-radio);
    overflow: hidden;
}

.ep-card .card-header{
    border-bottom: 1px solid rgba(255,255,255,.15);
}

.ep-card .card-header h3,
.ep-card .card-header h2{
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 2px;
}

/* Encabezados de sección dentro de los formularios: "DATOS DEL
   CLIENTE", "DATOS DEL ENVÍO", "OBSERVACIONES". Discretos, en
   mayúsculas pequeñas, con una línea divisoria sobria. */
.ep-seccion{
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .78rem;
    font-weight: 700;
    color: var(--ep-gris-500);
    margin: 22px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ep-gris-200);
}

.ep-card .form-label{
    font-weight: 600;
    color: var(--ep-gris-800);
    font-size: .92rem;
}

.ep-card .form-control,
.ep-card .form-select{
    border-radius: var(--ep-radio-sm);
    border-color: var(--ep-gris-200);
}

.ep-card .form-control:focus,
.ep-card .form-select:focus{
    border-color: var(--ep-azul);
    box-shadow: 0 0 0 .2rem rgba(37,99,235,.15);
}

.ep-card .btn{
    border-radius: var(--ep-radio-sm);
    font-weight: 600;
}

.ep-card .btn-primary,
.ep-card .btn-success{
    transition: filter .15s ease, transform .05s ease;
}

.ep-card .btn-primary:hover,
.ep-card .btn-success:hover{
    filter: brightness(0.94);
}

.ep-tabla-resumen th{
    background: var(--ep-gris-100);
    width: 40%;
    font-weight: 600;
    color: var(--ep-gris-800);
}

/* ---- Panel administrativo ---- */

.ep-panel{
    max-width: 1400px;
}

.ep-contadores{
    row-gap: 12px;
}

.ep-contador{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 14px 8px;
    background: #fff;
    border: 1px solid var(--ep-gris-200);
    border-radius: var(--ep-radio);
    text-decoration: none;
    color: var(--ep-gris-800);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ep-contador:hover{
    border-color: var(--ep-azul);
    color: var(--ep-gris-800);
}

.ep-contador.activo{
    border-color: var(--ep-azul);
    background: #eef4ff;
    box-shadow: 0 0 0 1px var(--ep-azul) inset;
}

.ep-contador-numero{
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--ep-azul);
    line-height: 1;
}

.ep-contador-etiqueta{
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ep-gris-500);
    font-weight: 600;
}

.ep-toolbar{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid var(--ep-gris-200);
    border-radius: var(--ep-radio);
    padding: 12px;
}

.ep-toolbar-buscador{
    flex: 1 1 320px;
    min-width: 220px;
}

.ep-toolbar-acciones{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ep-panel .table thead.table-dark th{
    background: var(--ep-gris-800);
    border-color: var(--ep-gris-800);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ============================================================
   SISTEMA DE DISEÑO ENVIOSPRO — Rediseño visual completo
   ============================================================
   Todo lo de abajo es PURAMENTE presentacional: no depende de
   ningún name=, id=, endpoint ni valor generado por PHP más allá
   de las clases que se le colocan a los elementos. Convive con
   las reglas anteriores (Fase 16) sin quitarlas.
   ============================================================ */

:root{
    /* Marca */
    --ep-blue: #2563eb;
    --ep-blue-dark: #1746b3;
    --ep-blue-darker: #12306e;
    --ep-blue-light: #eaf1ff;
    --ep-blue-lighter: #f5f9ff;
    --ep-cyan: #0ea5b7;
    --ep-cyan-light: #e6f8fa;
    --ep-violet: #7c53d1;
    --ep-violet-light: #f1ecfb;
    --ep-orange: #ea7d2e;
    --ep-orange-light: #fdf0e4;

    /* Estados */
    --ep-success: #159a56;
    --ep-success-light: #e8f8ef;
    --ep-warning: #b5790a;
    --ep-warning-bg: #fff4dd;
    --ep-danger: #cc3341;
    --ep-danger-light: #fdedee;
    --ep-info: #2472c8;
    --ep-info-light: #e9f2fc;

    /* Superficie / texto */
    --ep-bg: #f3f6fb;
    --ep-surface: #ffffff;
    --ep-text: #16213a;
    --ep-text-muted: #64748b;
    --ep-text-soft: #8592a6;
    --ep-border: #e4e9f2;
    --ep-border-strong: #d3dbe8;

    /* Geometría */
    --ep-r-sm: 10px;
    --ep-r-md: 14px;
    --ep-r-lg: 20px;
    --ep-r-pill: 999px;

    /* Sombras */
    --ep-shadow-xs: 0 1px 2px rgba(16, 33, 66, .05);
    --ep-shadow-sm: 0 2px 10px rgba(16, 33, 66, .06);
    --ep-shadow-md: 0 10px 28px rgba(16, 33, 66, .09);
    --ep-shadow-lg: 0 24px 60px rgba(16, 33, 66, .14);

    --ep-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body{
    font-family: var(--ep-font);
    background: var(--ep-bg);
    color: var(--ep-text);
}

/* ---------- Utilidades base ---------- */

.ep-shell{ min-height: 100vh; display: flex; flex-direction: column; }
.ep-main{ flex: 1 1 auto; }

/* ---------- Header público (landing / formularios) ---------- */

.ep-topbar{
    background: var(--ep-surface);
    border-bottom: 1px solid var(--ep-border);
    position: sticky;
    top: 0;
    z-index: 50;
}

.ep-brand{
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.ep-brand-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--ep-r-md);
    background: linear-gradient(135deg, var(--ep-blue), var(--ep-blue-dark));
    color: #fff;
    font-size: 1.25rem;
    box-shadow: var(--ep-shadow-sm);
    flex-shrink: 0;
}

.ep-brand-text .ep-brand-title{
    font-weight: 800;
    font-size: 1.28rem;
    letter-spacing: -.01em;
    line-height: 1.1;
    color: var(--ep-text);
}

.ep-brand-text .ep-brand-title span{ color: var(--ep-blue); }

.ep-brand-text .ep-brand-sub{
    font-size: .72rem;
    color: var(--ep-text-muted);
    font-weight: 600;
    letter-spacing: .01em;
}

.ep-footer{
    background: var(--ep-surface);
    border-top: 1px solid var(--ep-border);
    color: var(--ep-text-muted);
}

.ep-footer .ep-tagline{
    font-weight: 600;
    color: var(--ep-blue-dark);
}

/* ---------- Landing / selección de canal ---------- */

.ep-hero{
    background:
        radial-gradient(1100px 480px at 15% -10%, var(--ep-blue-light) 0%, rgba(245,249,255,0) 60%),
        radial-gradient(900px 420px at 100% 0%, var(--ep-cyan-light) 0%, rgba(245,249,255,0) 55%);
    padding: 56px 0 40px;
}

.ep-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ep-blue-light);
    color: var(--ep-blue-dark);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--ep-r-pill);
}

.ep-hero h1{
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ep-text);
    margin: 16px 0 8px;
}

.ep-hero p.ep-lead{
    color: var(--ep-text-muted);
    font-size: 1.05rem;
    max-width: 560px;
}

.ep-option-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 28px;
}

@media (min-width: 640px){
    .ep-option-grid{ grid-template-columns: 1fr 1fr; }
}

.ep-option-card{
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--ep-surface);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-r-lg);
    padding: 20px;
    text-decoration: none;
    color: var(--ep-text);
    box-shadow: var(--ep-shadow-xs);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.ep-option-card:hover{
    transform: translateY(-3px);
    box-shadow: var(--ep-shadow-md);
    border-color: var(--ep-blue);
    color: var(--ep-text);
}

.ep-option-card.ep-option-full{ grid-column: 1 / -1; }

.ep-option-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: var(--ep-r-md);
    font-size: 1.5rem;
    flex-shrink: 0;
    color: #fff;
}

.ep-option-title{ font-weight: 700; font-size: 1.05rem; }
.ep-option-sub{ color: var(--ep-text-muted); font-size: .86rem; }

.ep-option-arrow{
    margin-left: auto;
    color: var(--ep-text-soft);
    font-size: 1.2rem;
    transition: transform .15s ease;
}

.ep-option-card:hover .ep-option-arrow{ transform: translateX(4px); color: var(--ep-blue); }

.ep-option-card.ep-secundario{ border-style: dashed; }

/* Acentos por módulo (Shalom / Delivery / Recojo / Otras) */
.ep-acento-shalom .ep-option-icon,
.ep-icono-shalom{ background: linear-gradient(135deg, var(--ep-blue), var(--ep-blue-dark)); }
.ep-acento-delivery .ep-option-icon,
.ep-icono-delivery{ background: linear-gradient(135deg, var(--ep-cyan), #0a7f8e); }
.ep-acento-recojo .ep-option-icon,
.ep-icono-recojo{ background: linear-gradient(135deg, var(--ep-violet), #5c38a8); }
.ep-acento-otras .ep-option-icon,
.ep-icono-otras{ background: linear-gradient(135deg, var(--ep-orange), #c9631c); }

.ep-feature-row{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 32px;
}

@media (min-width: 640px){
    .ep-feature-row{ grid-template-columns: repeat(4, 1fr); }
}

.ep-feature{
    text-align: center;
    background: var(--ep-surface);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-r-md);
    padding: 16px 10px;
}

.ep-feature i{ font-size: 1.3rem; color: var(--ep-blue); }
.ep-feature-label{ font-weight: 700; font-size: .82rem; margin-top: 6px; }

.ep-hero-panel{
    background: var(--ep-surface);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-r-lg);
    box-shadow: var(--ep-shadow-md);
    padding: 28px;
    text-align: center;
}

/* ---------- Tarjetas de formulario ---------- */

.ep-card{
    box-shadow: var(--ep-shadow-sm);
}

.ep-card .card-header{
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, var(--ep-blue), var(--ep-blue-dark));
    padding: 20px 24px;
}

.ep-card.ep-tema-delivery .card-header{ background: linear-gradient(135deg, var(--ep-cyan), #0a7f8e); }
.ep-card.ep-tema-recojo .card-header{ background: linear-gradient(135deg, var(--ep-violet), #5c38a8); }
.ep-card.ep-tema-otras .card-header{ background: linear-gradient(135deg, var(--ep-orange), #c9631c); }

.ep-card .card-header .ep-header-icon{
    width: 44px;
    height: 44px;
    border-radius: var(--ep-r-md);
    background: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.ep-card .card-header h3{
    font-size: 1.15rem;
    margin: 0;
}

.ep-card .card-header p{
    margin: 0;
    font-size: .84rem;
    opacity: .92;
}

.ep-card .card-body{ padding: 26px; }

@media (max-width: 575.98px){
    .ep-card .card-body{ padding: 18px; }
    .ep-card .card-header{ padding: 16px 18px; }
}

/* Indicador de pasos (solo visual) */
.ep-steps{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.ep-steps .ep-step{
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.75);
    font-size: .8rem;
    font-weight: 600;
}

.ep-steps .ep-step-dot{
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    color: #fff;
}

.ep-steps .ep-step.activo{ color: #fff; }
.ep-steps .ep-step.activo .ep-step-dot{ background: #fff; color: var(--ep-blue-dark); }
.ep-steps .ep-step-line{ width: 26px; height: 2px; background: rgba(255,255,255,.3); }

/* Secciones dentro del formulario */
.ep-seccion{
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .76rem;
    font-weight: 800;
    color: var(--ep-blue-dark);
    margin: 26px 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ep-blue-light);
}

.ep-seccion:first-of-type{ margin-top: 4px; }
.ep-seccion i{ font-size: .9rem; }

/* Campos */
.ep-card .form-label,
.ep-form-wide .form-label{
    font-weight: 700;
    color: var(--ep-text);
    font-size: .86rem;
    margin-bottom: 6px;
}

.form-control, .form-select{
    border-radius: var(--ep-r-sm);
    border: 1.5px solid var(--ep-border-strong);
    padding: .62rem .85rem;
    font-size: .94rem;
    color: var(--ep-text);
    background-color: #fff;
}

.form-control::placeholder{ color: var(--ep-text-soft); }

.form-control:focus, .form-select:focus{
    border-color: var(--ep-blue);
    box-shadow: 0 0 0 .18rem var(--ep-blue-light);
}

.form-control:disabled, .form-select:disabled{
    background: var(--ep-bg);
    color: var(--ep-text-muted);
}

/* ---------- Botones ---------- */

.btn{
    border-radius: var(--ep-r-sm);
    font-weight: 700;
    padding: .6rem 1.15rem;
    font-size: .92rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
}

.btn-lg{ padding: .75rem 1.4rem; font-size: 1rem; }
.btn-sm{ padding: .4rem .8rem; font-size: .82rem; }

.btn-primary{ background: var(--ep-blue); border-color: var(--ep-blue); }
.btn-primary:hover, .btn-primary:focus{ background: var(--ep-blue-dark); border-color: var(--ep-blue-dark); }

.btn-success{ background: var(--ep-success); border-color: var(--ep-success); }
.btn-success:hover{ filter: brightness(.92); }

.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn:disabled{ transform: none; }

.btn-outline-secondary{ border-width: 1.5px; }

/* ---------- Alertas ---------- */

.alert{
    border: 1px solid transparent;
    border-radius: var(--ep-r-md);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: .92rem;
}

.alert i{ font-size: 1.05rem; margin-top: 1px; }

.alert-primary{ background: var(--ep-blue-light); color: var(--ep-blue-darker); border-color: #d7e6ff; }
.alert-success{ background: var(--ep-success-light); color: #0d6b3c; border-color: #cdefdd; }
.alert-warning{ background: var(--ep-warning-bg); color: #8a5b06; border-color: #fbe4b3; }
.alert-danger{ background: var(--ep-danger-light); color: #97202b; border-color: #f7d4d7; }
.alert-secondary{ background: var(--ep-bg); color: var(--ep-text-muted); border-color: var(--ep-border); }

/* Tarjeta de canal/WhatsApp dentro de los formularios */
.ep-canal-card{
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--ep-blue-lighter);
    border: 1px solid var(--ep-blue-light);
    border-radius: var(--ep-r-md);
    padding: 14px 16px;
}

.ep-canal-card .ep-canal-icon{
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    color: var(--ep-blue);
    font-size: 1.1rem;
    box-shadow: var(--ep-shadow-xs);
    flex-shrink: 0;
}

.ep-canal-card.ep-canal-whatsapp .ep-canal-icon{ color: #1fae4b; }

.ep-canal-card .ep-canal-nombre{ font-weight: 800; color: var(--ep-text); font-size: .92rem; }
.ep-canal-card .ep-canal-detalle{ color: var(--ep-text-muted); font-size: .84rem; }

/* Notas de zona / info suave */
.ep-nota{
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ep-text-muted);
    font-size: .82rem;
    margin-top: 6px;
}

/* ---------- Tabla resumen (previsualización / ver pedido) ---------- */

.ep-tabla-resumen{ border-radius: var(--ep-r-md); overflow: hidden; }
.ep-tabla-resumen th{
    background: var(--ep-bg);
    width: 38%;
    font-weight: 700;
    color: var(--ep-text-muted);
    font-size: .84rem;
    border-color: var(--ep-border) !important;
}
.ep-tabla-resumen td{ font-size: .93rem; border-color: var(--ep-border) !important; }

.ep-resumen-grupo{
    background: var(--ep-surface);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-r-md);
    margin-bottom: 18px;
    overflow: hidden;
}

.ep-resumen-grupo-titulo{
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ep-bg);
    padding: 10px 16px;
    font-weight: 800;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ep-blue-dark);
    border-bottom: 1px solid var(--ep-border);
}

.ep-resumen-grupo table{ margin: 0; }
.ep-resumen-grupo table th{ border: none; background: transparent; width: 42%; }
.ep-resumen-grupo table td{ border: none; }
.ep-resumen-grupo table tr:not(:last-child) th,
.ep-resumen-grupo table tr:not(:last-child) td{ border-bottom: 1px solid var(--ep-border); }

.ep-pregunta-confirmacion{
    text-align: center;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--ep-text);
    margin: 18px 0 14px;
}

/* ============================================================
   PANEL ADMINISTRATIVO
   ============================================================ */

.ep-admin{
    min-height: 100vh;
    display: flex;
    background: var(--ep-bg);
}

.ep-sidebar{
    width: 250px;
    flex-shrink: 0;
    background: var(--ep-surface);
    border-right: 1px solid var(--ep-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.ep-sidebar-brand{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 20px;
    border-bottom: 1px solid var(--ep-border);
}

.ep-sidebar-nav{
    flex: 1 1 auto;
    padding: 16px 12px;
    overflow-y: auto;
}

.ep-sidebar-label{
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ep-text-soft);
    padding: 8px 12px 6px;
}

.ep-sidebar-link{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--ep-r-sm);
    color: var(--ep-text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: 2px;
    transition: background .12s ease, color .12s ease;
}

.ep-sidebar-link i{ font-size: 1.05rem; width: 20px; text-align: center; }

.ep-sidebar-link:hover{ background: var(--ep-blue-lighter); color: var(--ep-blue-dark); }

.ep-sidebar-link.activo{
    background: var(--ep-blue-light);
    color: var(--ep-blue-dark);
    font-weight: 800;
}

.ep-sidebar-link .ep-count{
    margin-left: auto;
    background: var(--ep-bg);
    color: var(--ep-text-muted);
    font-size: .74rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: var(--ep-r-pill);
}

.ep-sidebar-link.activo .ep-count{ background: #fff; color: var(--ep-blue-dark); }

.ep-sidebar-footer{
    padding: 14px 12px;
    border-top: 1px solid var(--ep-border);
}

.ep-content{
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ep-topheader{
    background: var(--ep-surface);
    border-bottom: 1px solid var(--ep-border);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.ep-topheader .ep-user{
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: .88rem;
    color: var(--ep-text);
}

.ep-topheader .ep-user i{
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--ep-blue-light);
    color: var(--ep-blue-dark);
    display: flex; align-items: center; justify-content: center;
}

.ep-panel-body{ padding: 24px; max-width: 1400px; width: 100%; margin: 0 auto; }

@media (max-width: 991.98px){
    .ep-sidebar{ position: fixed; left: 0; top: 0; z-index: 1050; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--ep-shadow-lg); }
    .ep-sidebar.mostrar{ transform: translateX(0); }
    .ep-panel-body{ padding: 16px; }
    .ep-topheader{ padding: 12px 16px; }
}

/* Tarjetas de estadísticas */
.ep-stat-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (min-width: 768px){
    .ep-stat-grid{ grid-template-columns: repeat(5, 1fr); }
}

.ep-stat-card{
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ep-surface);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-r-md);
    padding: 16px;
    text-decoration: none;
    color: var(--ep-text);
    box-shadow: var(--ep-shadow-xs);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.ep-stat-card:hover{ transform: translateY(-2px); box-shadow: var(--ep-shadow-sm); color: var(--ep-text); }

.ep-stat-card.activa{ border-color: var(--ep-blue); box-shadow: 0 0 0 1px var(--ep-blue) inset, var(--ep-shadow-sm); }

.ep-stat-icon{
    width: 44px; height: 44px;
    border-radius: var(--ep-r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    color: #fff;
}

.ep-stat-pendiente .ep-stat-icon{ background: linear-gradient(135deg,#f6ad2e,#c9820b); }
.ep-stat-enviado .ep-stat-icon{ background: linear-gradient(135deg,#3b8bf0,#1746b3); }
.ep-stat-entregado .ep-stat-icon{ background: linear-gradient(135deg,#22b56f,#0d7a49); }
.ep-stat-anulado .ep-stat-icon{ background: linear-gradient(135deg,#e2606d,#b3212e); }
.ep-stat-todos .ep-stat-icon{ background: linear-gradient(135deg,#64748b,#3f4b5e); }

.ep-stat-numero{ font-size: 1.5rem; font-weight: 800; line-height: 1; }
.ep-stat-etiqueta{ font-size: .78rem; color: var(--ep-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }

/* Buscador protagonista */
.ep-search-box{
    position: relative;
}

.ep-search-box i{
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ep-text-soft);
    font-size: 1rem;
}

.ep-search-box input{
    padding-left: 42px;
    height: 48px;
    font-size: .96rem;
    border-radius: var(--ep-r-md);
}

/* Toolbar de acciones */
.ep-toolbar{
    border-radius: var(--ep-r-md);
    box-shadow: var(--ep-shadow-xs);
}

/* Tabla de pedidos */
.ep-table-wrap{
    background: var(--ep-surface);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-r-md);
    box-shadow: var(--ep-shadow-xs);
    overflow: hidden;
}

.ep-table{ margin: 0; }
.ep-table thead th{
    background: var(--ep-text);
    color: #fff;
    border: none;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 800;
    padding: 14px 14px;
    white-space: nowrap;
}

.ep-table tbody td{
    padding: 13px 14px;
    vertical-align: middle;
    font-size: .89rem;
    border-color: var(--ep-border);
}

.ep-table tbody tr{ transition: background .1s ease; }
.ep-table tbody tr:hover{ background: var(--ep-blue-lighter); }

.ep-codigo{
    font-family: "SFMono-Regular", Consolas, monospace;
    font-weight: 700;
    color: var(--ep-blue-dark);
    font-size: .84rem;
}

.ep-cliente-nombre{ font-weight: 700; }

/* Badges de estado y tipo de envío */
.ep-badge{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: var(--ep-r-pill);
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}

.ep-badge i{ font-size: .68rem; }

.ep-badge-pendiente{ background: var(--ep-warning-bg); color: var(--ep-warning); }
.ep-badge-enviado{ background: var(--ep-info-light); color: var(--ep-info); }
.ep-badge-entregado{ background: var(--ep-success-light); color: var(--ep-success); }
.ep-badge-anulado{ background: var(--ep-danger-light); color: var(--ep-danger); }
.ep-badge-tipo{ background: var(--ep-bg); color: var(--ep-text-muted); border: 1px solid var(--ep-border); }

/* Acciones (ver / editar / imprimir) */
.ep-acciones{ display: flex; gap: 6px; flex-wrap: nowrap; }
.ep-accion-btn{
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--ep-r-sm);
    border: 1px solid var(--ep-border-strong);
    background: #fff;
    color: var(--ep-text-muted);
    transition: all .12s ease;
}
.ep-accion-btn:hover{ background: var(--ep-blue-light); color: var(--ep-blue-dark); border-color: var(--ep-blue); }
.ep-accion-btn.ep-accion-editar:hover{ background: var(--ep-warning-bg); color: var(--ep-warning); border-color: var(--ep-warning); }
.ep-accion-btn.ep-accion-imprimir:hover{ background: var(--ep-text); color: #fff; border-color: var(--ep-text); }

/* Ficha de detalle de pedido */
.ep-ficha-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px){
    .ep-ficha-grid{ grid-template-columns: 1fr 1fr; }
}

.ep-ficha-grid .ep-resumen-grupo.ep-full{ grid-column: 1 / -1; }

/* Login */
.ep-login-wrap{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(900px 460px at 10% -10%, var(--ep-blue-light), rgba(245,249,255,0) 60%),
        radial-gradient(700px 420px at 100% 110%, var(--ep-cyan-light), rgba(245,249,255,0) 60%),
        var(--ep-bg);
    padding: 24px;
}

/* Genérico: botón hamburguesa del sidebar en móvil */
.ep-burger{
    display: none;
    border: 1px solid var(--ep-border-strong);
    background: #fff;
    border-radius: var(--ep-r-sm);
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    color: var(--ep-text);
}

@media (max-width: 991.98px){
    .ep-burger{ display: inline-flex; }
}

.ep-overlay{
    display: none;
    position: fixed; inset: 0;
    background: rgba(15,23,42,.4);
    z-index: 1040;
}
.ep-overlay.mostrar{ display: block; }

/* ---------- Tarjeta de ubicación de tienda (Recojo en tienda) ---------- */

.ep-tienda-card{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--ep-violet-light);
    border: 1px solid #e4d9f7;
    border-radius: var(--ep-r-md);
    padding: 16px;
}

.ep-tienda-card .ep-tienda-icon{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ep-violet);
    font-size: 1.15rem;
    box-shadow: var(--ep-shadow-xs);
    flex-shrink: 0;
}

.ep-tienda-nombre{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    color: var(--ep-text);
    text-decoration: none;
    font-size: .96rem;
}

.ep-tienda-nombre:hover{ color: var(--ep-violet); text-decoration: underline; }
.ep-tienda-nombre i{ font-size: .8rem; color: var(--ep-violet); }

.ep-tienda-direccion{ color: var(--ep-text-muted); font-size: .86rem; line-height: 1.5; }

.ep-tienda-nota{
    margin-top: 8px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--ep-violet);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Sub-sección de horario, dentro de la misma tarjeta de ubicación de
   la tienda: separada de la dirección con un divisor propio, para que
   se lea como información aparte sin ser una alerta de error. */
.ep-tienda-horario{
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e4d9f7;
}

.ep-tienda-horario-titulo{
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 800;
    font-size: .86rem;
    color: var(--ep-violet);
    margin-bottom: 4px;
}

.ep-tienda-horario-detalle{
    font-weight: 700;
    font-size: .9rem;
    color: var(--ep-text);
    margin-bottom: 2px;
}

.ep-tienda-horario-info{
    font-size: .8rem;
    color: var(--ep-text-muted);
    line-height: 1.4;
}

/* ====================================================================
   PORTADA INSTITUCIONAL (index.php) — clases nuevas y aditivas.
   No reemplazan ni modifican ninguna clase existente (ep-hero,
   ep-option-card, ep-feature, etc. siguen intactas y las siguen
   usando nuevo_envio.php / formularios/*). Reutilizan las mismas
   variables de color/radio/sombra ya definidas arriba en :root.
   ==================================================================== */

.ep-land-cta-group{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
    margin-bottom: 28px;
}

.ep-land-section{
    padding: 72px 0;
}

.ep-land-section-alt{
    background: var(--ep-surface);
    border-top: 1px solid var(--ep-border);
    border-bottom: 1px solid var(--ep-border);
}

.ep-land-section-dark{
    padding: 64px 0;
    background: linear-gradient(135deg, var(--ep-blue-darker), var(--ep-blue-dark));
    color: #fff;
}

.ep-land-section-dark .ep-land-section-title{ color: #fff; }

.ep-land-section-title{
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--ep-text);
    text-align: center;
    margin-bottom: 40px;
}

.ep-land-lead-alt{
    max-width: 640px;
    margin: 0 auto;
    font-size: 1.05rem;
    color: rgba(255,255,255,.88);
}

/* Tarjetas (propuesta de valor / seguridad) */
.ep-land-grid-4{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

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

.ep-land-card{
    background: var(--ep-surface);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-r-lg);
    padding: 24px 20px;
    box-shadow: var(--ep-shadow-xs);
    transition: transform .15s ease, box-shadow .15s ease;
}

.ep-land-card:hover{
    transform: translateY(-3px);
    box-shadow: var(--ep-shadow-md);
}

.ep-land-card h3{
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--ep-text);
    margin: 14px 0 8px;
}

.ep-land-card p{
    font-size: .88rem;
    color: var(--ep-text-muted);
    margin: 0;
    line-height: 1.5;
}

.ep-land-card-icon{
    width: 46px;
    height: 46px;
    border-radius: var(--ep-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    flex-shrink: 0;
}

.ep-land-icon-blue{ background: linear-gradient(135deg, var(--ep-blue), var(--ep-blue-dark)); }
.ep-land-icon-cyan{ background: linear-gradient(135deg, var(--ep-cyan), #0a7f8e); }
.ep-land-icon-violet{ background: linear-gradient(135deg, var(--ep-violet), #5c38a8); }
.ep-land-icon-orange{ background: linear-gradient(135deg, var(--ep-orange), #c9631c); }

/* Beneficios */
.ep-land-beneficios{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: 900px;
    margin: 0 auto;
}

.ep-land-beneficio{
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ep-surface);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-r-md);
    padding: 14px 16px;
    font-weight: 700;
    font-size: .92rem;
    color: var(--ep-text);
}

.ep-land-beneficio i{ color: var(--ep-success); font-size: 1.1rem; }

/* Cómo funciona: pasos */
.ep-land-pasos{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

.ep-land-paso{
    background: var(--ep-surface);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-r-lg);
    padding: 24px 18px;
    text-align: center;
    box-shadow: var(--ep-shadow-xs);
}

.ep-land-paso-numero{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ep-r-pill);
    background: var(--ep-blue-light);
    color: var(--ep-blue-dark);
    font-weight: 800;
    margin-bottom: 12px;
}

.ep-land-paso h3{
    font-size: .96rem;
    font-weight: 800;
    color: var(--ep-text);
    margin: 0 0 6px;
}

.ep-land-paso p{
    font-size: .85rem;
    color: var(--ep-text-muted);
    margin: 0;
    line-height: 1.4;
}

/* Diagrama de flujo (negocio -> enlace -> cliente -> pedido -> panel) */
.ep-land-flujo{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 980px;
    margin: 0 auto;
}

.ep-land-flujo-item{
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ep-blue-lighter);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-r-pill);
    padding: 10px 18px;
    font-weight: 700;
    font-size: .86rem;
    color: var(--ep-blue-dark);
    white-space: nowrap;
}

.ep-land-flujo-flecha{
    color: var(--ep-text-soft);
    font-size: 1rem;
}

/* Tipos de negocio */
.ep-land-tipos{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}

.ep-land-tipo{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ep-surface);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-r-pill);
    padding: 10px 18px;
    font-weight: 700;
    font-size: .88rem;
    color: var(--ep-text);
    box-shadow: var(--ep-shadow-xs);
}

.ep-land-tipo i{ color: var(--ep-blue); }

/* CTA final */
.ep-land-cta{
    padding: 64px 0;
    text-align: center;
    background: linear-gradient(135deg, var(--ep-blue), var(--ep-blue-dark));
    color: #fff;
}

.ep-land-cta h2{
    font-size: 1.7rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.ep-land-cta p{
    max-width: 620px;
    margin: 0 auto 26px;
    color: rgba(255,255,255,.88);
    font-size: 1rem;
}

@media (max-width: 991px){
    .ep-land-grid-4{ grid-template-columns: repeat(2, 1fr); }
    .ep-land-grid-3{ grid-template-columns: repeat(2, 1fr); }
    .ep-land-pasos{ grid-template-columns: repeat(2, 1fr); }
    .ep-land-beneficios{ grid-template-columns: 1fr; }
}

@media (max-width: 575px){
    .ep-land-grid-4{ grid-template-columns: 1fr; }
    .ep-land-grid-3{ grid-template-columns: 1fr; }
    .ep-land-pasos{ grid-template-columns: 1fr; }
    .ep-land-cta-group{ flex-direction: column; }
    .ep-land-cta-group .btn{ width: 100%; }
    .ep-land-flujo-flecha{ transform: rotate(90deg); }
}