/* ══ RESET & VARIABLES ══════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --cream:#fdf6f0;
  --blush:#fde8ee;
  --petal:#f9c8d9;
  --rose:#e8839e;
  --deep-rose:#c95b7a;
  --berry:#8b2252;
  --lavender:#e8d5f0;
  --lilac:#b58ec4;
  --plum:#7a4f8a;
  --mint:#d4ede8;
  --sage:#6baa9a;
  --gold:#d4a853;
  --warm-gold:#f0c97a;
  --ink:#2d1520;
  --text-mid:#7a4f62;
  --text-soft:#b08090;
  --text-muted:#b08090;
  --glass:rgba(255,255,255,.55);
  --glass-border:rgba(232,131,158,.25);
  --shadow:rgba(139,34,82,.1);
  --border:rgba(232,131,158,.2);
  --ok:#6baa9a;
  --shein:#c95b7a;
  --tiktok:#6baa9a;
  --r:16px;
  --r2:24px;
}

/* ══ BODY & FONDO ══════════════════════════════════════════════════════════ */
body{
  font-family:'DM Sans',sans-serif;
  background:var(--cream);
  color:var(--ink);
  min-height:100vh;
  background-image:
    radial-gradient(ellipse 70% 50% at 15% 0%,rgba(249,200,217,.5) 0%,transparent 55%),
    radial-gradient(ellipse 50% 60% at 90% 20%,rgba(232,213,240,.45) 0%,transparent 50%),
    radial-gradient(ellipse 40% 40% at 80% 90%,rgba(212,237,232,.4) 0%,transparent 50%),
    radial-gradient(ellipse 60% 40% at 5% 85%,rgba(249,200,217,.3) 0%,transparent 55%);
  background-attachment:fixed;
  overflow-x:hidden;
}

/* Patrón floral de fondo */
body::before{
  content:'';
  position:fixed;top:0;left:0;right:0;bottom:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='60' cy='60' r='3' fill='none' stroke='%23e8839e' stroke-width='.4' opacity='.18'/%3E%3Ccircle cx='60' cy='60' r='12' fill='none' stroke='%23e8839e' stroke-width='.3' opacity='.1'/%3E%3Cellipse cx='60' cy='45' rx='5' ry='10' fill='%23f9c8d9' opacity='.08'/%3E%3Cellipse cx='75' cy='55' rx='5' ry='10' fill='%23f9c8d9' opacity='.08' transform='rotate(72 60 60)'/%3E%3Cellipse cx='70' cy='75' rx='5' ry='10' fill='%23f9c8d9' opacity='.08' transform='rotate(144 60 60)'/%3E%3Cellipse cx='50' cy='75' rx='5' ry='10' fill='%23f9c8d9' opacity='.08' transform='rotate(216 60 60)'/%3E%3Cellipse cx='45' cy='55' rx='5' ry='10' fill='%23f9c8d9' opacity='.08' transform='rotate(288 60 60)'/%3E%3C/svg%3E");
  background-size:120px 120px;
  pointer-events:none;
  z-index:0;
  opacity:.6;
}

/* ══ HEADER ════════════════════════════════════════════════════════════════ */
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 2.5rem;
  background:rgba(253,246,240,.88);
  backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:1px solid rgba(232,131,158,.2);
  position:sticky;top:0;z-index:200;
  gap:1rem;flex-wrap:wrap;
}
.header::after{
  content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--rose),var(--lilac),transparent);
  opacity:.6;
}
.header h1{
  font-family:'Playfair Display',serif;
  font-size:1.5rem;font-weight:400;color:var(--ink);
  display:flex;align-items:center;gap:.5rem;
}
.header h1 span{
  font-style:italic;
  background:linear-gradient(135deg,var(--deep-rose) 0%,var(--lilac) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.header-sub{
  font-size:.75rem;color:var(--text-soft);margin-top:.1rem;
  font-style:italic;display:flex;align-items:center;gap:.4rem;
}
.header-sub::before{content:'✿';color:var(--rose);font-size:.65rem;}

.header-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;}

/* ══ BOTONES ═══════════════════════════════════════════════════════════════ */
.btn{
  padding:.42rem 1.1rem;border-radius:30px;text-decoration:none;
  font-size:.78rem;font-weight:500;cursor:pointer;transition:all .22s;
  border:none;font-family:'DM Sans',sans-serif;
  display:inline-flex;align-items:center;gap:.35rem;letter-spacing:.02em;
}
.btn-primary{
  background:linear-gradient(135deg,var(--deep-rose) 0%,var(--berry) 100%);
  color:#fff;
  box-shadow:0 4px 16px rgba(201,91,122,.3);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 7px 22px rgba(201,91,122,.4);}
.btn-ghost{
  background:rgba(255,255,255,.6);
  color:var(--text-mid);
  border:1px solid rgba(232,131,158,.25);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{color:var(--deep-rose);border-color:var(--rose);background:rgba(232,131,158,.08);}

/* ══ FILTROS ═══════════════════════════════════════════════════════════════ */
.filtros{
  display:flex;align-items:center;gap:.55rem;
  padding:.85rem 2.5rem;
  background:rgba(253,246,240,.7);
  border-bottom:1px solid rgba(232,131,158,.12);
  flex-wrap:wrap;
  position:relative;z-index:1;
  backdrop-filter:blur(10px);
}
.filtros input[type="text"]{
  flex:1;min-width:180px;max-width:300px;
  padding:.42rem .95rem;border-radius:30px;
  border:1px solid rgba(232,131,158,.25);
  background:rgba(255,255,255,.7);
  font-size:.8rem;color:var(--ink);
  font-family:'DM Sans',sans-serif;
  backdrop-filter:blur(8px);
  outline:none;transition:all .2s;
}
.filtros input[type="text"]:focus{
  border-color:var(--rose);
  box-shadow:0 0 0 3px rgba(232,131,158,.12);
  background:rgba(255,255,255,.9);
}
.filtros input[type="text"]::placeholder{color:var(--text-soft);}

.filtros select{
  padding:.42rem .95rem;border-radius:30px;
  border:1px solid rgba(232,131,158,.25);
  background:rgba(255,255,255,.7);
  font-size:.8rem;color:var(--text-mid);
  font-family:'DM Sans',sans-serif;
  outline:none;cursor:pointer;transition:all .2s;
  backdrop-filter:blur(8px);
}
.filtros select:focus{border-color:var(--rose);}

.btn-filtro{
  padding:.38rem .9rem;border-radius:25px;
  font-size:.75rem;font-weight:500;cursor:pointer;
  border:1px solid rgba(232,131,158,.22);
  background:rgba(255,255,255,.55);
  color:var(--text-soft);transition:all .2s;
  font-family:'DM Sans',sans-serif;
  text-decoration:none;
  backdrop-filter:blur(6px);
}
.btn-filtro:hover{color:var(--deep-rose);border-color:var(--rose);background:rgba(232,131,158,.08);}
.btn-filtro.active{
  background:linear-gradient(135deg,rgba(232,131,158,.18),rgba(181,142,196,.12));
  border-color:rgba(232,131,158,.4);
  color:var(--deep-rose);font-weight:600;
}

/* ══ KANBAN ════════════════════════════════════════════════════════════════ */
.kanban-wrapper{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
  padding:1.6rem 2.5rem 3rem;
  max-width:1400px;margin:0 auto;
  position:relative;z-index:1;
}
@media(max-width:900px){.kanban-wrapper{grid-template-columns:1fr;}}

/* ══ COLUMNA ═══════════════════════════════════════════════════════════════ */
.kanban-col{
  display:flex;flex-direction:column;
  border-radius:var(--r2);
  overflow:hidden;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(232,131,158,.18);
  backdrop-filter:blur(14px);
  box-shadow:0 4px 24px var(--shadow);
  min-height:200px;
}

/* Acento superior por columna */
.col-pendiente{border-top:3px solid var(--rose);}
.col-listo    {border-top:3px solid var(--sage);}
.col-entregado{border-top:3px solid var(--lilac);}

.col-header{
  display:flex;align-items:center;gap:.55rem;
  padding:.95rem 1.25rem;
  background:linear-gradient(135deg,rgba(253,246,240,.85),rgba(253,232,238,.5));
  border-bottom:1px solid rgba(232,131,158,.12);
  font-size:.82rem;font-weight:600;color:var(--text-mid);
}
.col-header .icon{font-size:1rem;}
.col-header .title{flex:1;font-family:'Playfair Display',serif;font-weight:400;font-style:italic;font-size:.95rem;}

.col-badge{
  background:linear-gradient(135deg,rgba(232,131,158,.2),rgba(181,142,196,.15));
  border:1px solid rgba(232,131,158,.3);
  color:var(--deep-rose);
  font-size:.68rem;font-weight:700;
  border-radius:20px;padding:.15rem .55rem;
  font-family:'DM Sans',sans-serif;
}
.col-listo    .col-badge{background:rgba(107,170,154,.15);border-color:rgba(107,170,154,.3);color:var(--sage);}
.col-entregado .col-badge{background:rgba(181,142,196,.15);border-color:rgba(181,142,196,.3);color:var(--plum);}

.col-body{
  flex:1;padding:.7rem;display:flex;flex-direction:column;gap:.6rem;
  min-height:120px;
}

/* Estado vacío */
.empty-col{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.6rem;padding:3rem 1rem;color:var(--text-soft);
  font-size:.8rem;font-style:italic;text-align:center;
}
.empty-col .big{font-size:2rem;opacity:.3;display:block;}

/* ══ TARJETA ═══════════════════════════════════════════════════════════════ */
.card{
  background:rgba(255,255,255,.8);
  border:1px solid rgba(232,131,158,.18);
  border-radius:var(--r);
  padding:.95rem 1rem;
  cursor:grab;transition:all .2s;
  position:relative;overflow:hidden;
  box-shadow:0 2px 10px rgba(139,34,82,.06),0 1px 2px rgba(255,255,255,.8) inset;
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1.5px;
  background:linear-gradient(90deg,transparent,rgba(232,131,158,.4),transparent);
}
.card:hover{
  transform:translateY(-3px);
  border-color:var(--rose);
  box-shadow:0 8px 26px rgba(139,34,82,.13);
}
.card:active{cursor:grabbing;}

/* Barra izquierda de alerta */
.card[data-estado="pendiente_separar"].alerta-card::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(to bottom,#e06080,rgba(224,96,128,.15));
  border-radius:2px 0 0 2px;
}

/* Acciones flotantes */
.card-actions{
  position:absolute;top:.55rem;right:.55rem;
  display:flex;gap:.25rem;
  opacity:0;transition:opacity .18s;
}
.card:hover .card-actions{opacity:1;}
.btn-icon{
  width:28px;height:28px;border-radius:50%;
  background:rgba(253,246,240,.92);
  border:1px solid rgba(232,131,158,.25);
  color:var(--text-mid);font-size:.8rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .18s;
  text-decoration:none;
}
.btn-icon:hover{background:rgba(232,131,158,.15);border-color:var(--rose);color:var(--deep-rose);}

.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.45rem;}
.card-id{font-size:.62rem;color:var(--text-soft);font-family:monospace;letter-spacing:.04em;}

/* Badges de origen */
.badge-origen{
  padding:.12rem .45rem;border-radius:10px;
  font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.badge-shein {background:rgba(201,91,122,.12);color:var(--deep-rose);border:1px solid rgba(201,91,122,.25);}
.badge-tiktok{background:rgba(107,170,154,.12);color:var(--sage);   border:1px solid rgba(107,170,154,.25);}

.card-nombre{
  font-size:.88rem;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:.25rem;margin-right:1.8rem;
}
.card-desc{
  font-size:.73rem;color:var(--text-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:.55rem;
}
.card-footer{
  display:flex;align-items:center;gap:.5rem;
  font-size:.72rem;
}
.card-total{
  font-family:'Playfair Display',serif;font-size:.95rem;
  font-weight:700;color:var(--ink);
}
.card-fecha{
  margin-left:auto;color:var(--text-soft);
  display:flex;align-items:center;gap:.2rem;
}
.card-icons{color:var(--text-soft);font-size:.8rem;display:flex;align-items:center;gap:.15rem;}

/* Estados Sortable */
.sortable-ghost  {opacity:.35;background:rgba(232,131,158,.08);border:1.5px dashed var(--rose);}
.sortable-chosen {box-shadow:0 10px 30px rgba(139,34,82,.18)!important;}
.sortable-drag   {opacity:.9;transform:rotate(1.5deg);}

/* ══ MODAL OVERLAY ═════════════════════════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;z-index:998;display:none;
  align-items:center;justify-content:center;
  background:rgba(45,21,32,.72);
  backdrop-filter:blur(18px);
}
.modal-overlay.open{display:flex;animation:modal-in .22s ease;}
@keyframes modal-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}

/* ══ MODAL BOX ═════════════════════════════════════════════════════════════ */
.modal{
  background:linear-gradient(160deg,#fff9fb 0%,#fdf0f6 60%,#f9edf5 100%);
  border:1px solid rgba(232,131,158,.3);
  border-radius:var(--r2);
  width:min(560px,94vw);
  max-height:88vh;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 30px 80px rgba(139,34,82,.22),0 8px 20px rgba(139,34,82,.1);
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.3rem 1.75rem 1rem;
  background:linear-gradient(135deg,rgba(249,200,217,.25),rgba(232,213,240,.2));
  border-bottom:1px solid rgba(232,131,158,.12);
}
.modal-header h2{
  font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:400;
  font-style:italic;color:var(--ink);
  display:flex;align-items:center;gap:.5rem;
}
.modal-header h2::before{content:'✿';font-size:.7rem;color:var(--rose);}
.modal-close{
  width:32px;height:32px;border-radius:50%;
  background:rgba(232,131,158,.08);border:1px solid rgba(232,131,158,.2);
  color:var(--text-soft);font-size:1.1rem;line-height:1;
  cursor:pointer;transition:all .18s;display:flex;align-items:center;justify-content:center;
}
.modal-close:hover{background:rgba(224,96,128,.15);color:var(--deep-rose);border-color:var(--rose);}

.modal-body{
  flex:1;overflow-y:auto;padding:1.5rem 1.75rem;
  scrollbar-width:thin;scrollbar-color:rgba(232,131,158,.25) transparent;
}
.modal-body::-webkit-scrollbar{width:4px;}
.modal-body::-webkit-scrollbar-thumb{background:rgba(232,131,158,.3);border-radius:4px;}

.modal-footer{
  padding:1rem 1.75rem 1.4rem;
  display:flex;align-items:center;justify-content:flex-end;gap:.6rem;
  flex-wrap:wrap;
  border-top:1px solid rgba(232,131,158,.1);
  background:rgba(253,246,240,.5);
}

/* ══ GRILLA DE DETALLE ═════════════════════════════════════════════════════ */
.detail-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:.8rem;
  margin-bottom:1.2rem;
}
.detail-item{
  background:rgba(255,255,255,.6);
  border:1px solid rgba(232,131,158,.15);
  border-radius:var(--r);padding:.75rem 1rem;
  backdrop-filter:blur(6px);
}
.detail-item.detail-full{grid-column:1/-1;}
.detail-item label{
  display:block;font-size:.66rem;
  text-transform:uppercase;letter-spacing:.09em;
  color:var(--text-soft);font-weight:500;margin-bottom:.3rem;
}
.detail-item span{font-size:.88rem;color:var(--ink);font-weight:500;}

/* Grilla de imágenes en el modal */
.img-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));
  gap:.5rem;margin-top:.65rem;
}
.img-thumb{
  width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:10px;cursor:pointer;
  border:2px solid transparent;transition:all .2s;
}
.img-thumb:hover{border-color:var(--rose);transform:scale(1.05);box-shadow:0 4px 14px rgba(139,34,82,.15);}
.no-img{
  grid-column:1/-1;font-size:.8rem;color:var(--text-soft);
  font-style:italic;padding:.75rem;text-align:center;
}

/* ══ TOAST ═════════════════════════════════════════════════════════════════ */
.toast-container{
  position:fixed;bottom:1.8rem;right:1.5rem;z-index:9999;
  display:flex;flex-direction:column;gap:.5rem;
}
.toast{
  background:rgba(45,21,32,.9);backdrop-filter:blur(16px);
  border:1px solid rgba(232,131,158,.25);
  color:rgba(255,255,255,.9);
  border-radius:30px;padding:.6rem 1.3rem;
  font-size:.8rem;font-weight:500;
  animation:toast-in .25s ease;
  box-shadow:0 8px 24px rgba(45,21,32,.3);
  max-width:280px;
}
.toast.success{border-color:rgba(107,170,154,.4);color:#b8e8df;}
.toast.error  {border-color:rgba(224,96,128,.4);color:#f0b0c0;}
@keyframes toast-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* ══ LOADING OVERLAY ═══════════════════════════════════════════════════════ */
.loading-overlay{
  position:fixed;inset:0;z-index:9990;
  background:rgba(45,21,32,.55);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;
}
.loading-overlay.show{display:flex;}
.spinner{
  width:44px;height:44px;border-radius:50%;
  border:3px solid rgba(249,200,217,.2);
  border-top-color:var(--rose);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══ RESPONSIVE ════════════════════════════════════════════════════════════ */
@media(max-width:700px){
  .header{padding:.85rem 1.2rem;}
  .filtros{padding:.7rem 1.2rem;}
  .kanban-wrapper{padding:1rem 1.2rem 2.5rem;}
  .header h1{font-size:1.2rem;}
  .detail-grid{grid-template-columns:1fr;}
}


/* ═══════════════════════════════════════════════════════════════
   nuevo-pedido.css — Estilo floral rosado · Mobile-first
   Paleta: porcelana y jardín (misma que el tablero kanban)
═══════════════════════════════════════════════════════════════ */

/* ── RESET & VARIABLES ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Paleta floral */
  --cream:       #fdf6f0;
  --blush:       #fde8ee;
  --petal:       #f9c8d9;
  --rose:        #e8839e;
  --deep-rose:   #c95b7a;
  --berry:       #8b2252;
  --lavender:    #e8d5f0;
  --lilac:       #b58ec4;
  --plum:        #7a4f8a;
  --mint:        #d4ede8;
  --sage:        #6baa9a;
  --gold:        #d4a853;
  --warm-gold:   #f0c97a;
  --ink:         #2d1520;
  --text-mid:    #7a4f62;
  --text-soft:   #b08090;
  --ok:          #6baa9a;
  --err:         #d94f72;
  --warn:        #c9873a;
  --border:      rgba(232,131,158,.22);
  --shadow:      rgba(139,34,82,.1);
  --glass:       rgba(255,255,255,.62);

  /* Espaciado & forma */
  --r:    14px;
  --r2:   22px;
  --r3:   32px;

  /* Transición estándar */
  --t:    .22s ease;
}

/* ── BODY & FONDO ──────────────────────────────────────────── */
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse 80% 50% at 10% 0%,  rgba(249,200,217,.55) 0%, transparent 55%),
    radial-gradient(ellipse 55% 55% at 92% 15%,  rgba(232,213,240,.5)  0%, transparent 52%),
    radial-gradient(ellipse 45% 40% at 85% 95%,  rgba(212,237,232,.4)  0%, transparent 50%),
    radial-gradient(ellipse 65% 40% at 3%  88%,  rgba(249,200,217,.3)  0%, transparent 55%);
  background-attachment: fixed;
  position: relative;
}

/* Patrón floral SVG de fondo */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='60' cy='60' r='3' fill='none' stroke='%23e8839e' stroke-width='.4' opacity='.18'/%3E%3Ccircle cx='60' cy='60' r='12' fill='none' stroke='%23e8839e' stroke-width='.3' opacity='.1'/%3E%3Cellipse cx='60' cy='45' rx='5' ry='10' fill='%23f9c8d9' opacity='.08'/%3E%3Cellipse cx='75' cy='55' rx='5' ry='10' fill='%23f9c8d9' opacity='.08' transform='rotate(72 60 60)'/%3E%3Cellipse cx='70' cy='75' rx='5' ry='10' fill='%23f9c8d9' opacity='.08' transform='rotate(144 60 60)'/%3E%3Cellipse cx='50' cy='75' rx='5' ry='10' fill='%23f9c8d9' opacity='.08' transform='rotate(216 60 60)'/%3E%3Cellipse cx='45' cy='55' rx='5' ry='10' fill='%23f9c8d9' opacity='.08' transform='rotate(288 60 60)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}

/* ── STICKY HEADER (nav floral) ────────────────────────────── */
.nav-floral {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; gap: .65rem;
  padding: .85rem 1.1rem;
  background: rgba(253,246,240,.9);
  backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid rgba(232,131,158,.18);
}
.nav-floral::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rose), var(--lilac), transparent);
  opacity: .55;
}
.nav-back {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--text-mid); text-decoration: none;
  font-size: .8rem; font-weight: 500;
  padding: .3rem .8rem; border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.5);
  transition: all var(--t);
}
.nav-back:hover { color: var(--deep-rose); border-color: var(--rose); background: rgba(232,131,158,.08); }
.nav-floral-title {
  flex: 1;
  font-family: 'Playfair Display', serif;
  font-size: 1rem; font-style: italic; font-weight: 400;
  color: var(--ink);
  display: flex; align-items: center; gap: .4rem;
}
.nav-fleur {
  color: var(--rose); font-size: .8rem;
  animation: fleurSpin 8s linear infinite;
  display: inline-block;
}
@keyframes fleurSpin { to { transform: rotate(360deg); } }

/* ── LAYOUT PRINCIPAL ──────────────────────────────────────── */
.page-wrap {
  position: relative; z-index: 1;
  max-width: 640px; margin: 0 auto;
  padding: 1.2rem .9rem 4rem;
}

/* ── PAGE HEADER ───────────────────────────────────────────── */
.page-header {
  margin-bottom: 1.4rem;
  animation: fadeUp .4s ease both;
}
.page-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem; font-weight: 400; line-height: 1.2;
  color: var(--ink);
}
.page-header h1 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--deep-rose) 0%, var(--lilac) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.page-header p {
  font-size: .78rem; color: var(--text-soft); margin-top: .35rem;
  font-style: italic; display: flex; align-items: center; gap: .4rem;
}
.page-header p::before { content: '✿'; color: var(--rose); font-style: normal; }

/* ── ALERTA DE ERRORES ─────────────────────────────────────── */
.alert-error {
  background: linear-gradient(135deg, rgba(217,79,114,.1), rgba(248,200,218,.08));
  border: 1px solid rgba(217,79,114,.3); border-left: 3px solid var(--err);
  border-radius: var(--r); padding: .9rem 1.1rem;
  margin-bottom: 1.3rem; font-size: .82rem; color: #9b3050;
  animation: shake .35s ease;
}
.alert-error strong { display: block; margin-bottom: .35rem; }
.alert-error ul { padding-left: 1.2rem; }
.alert-error li { margin: .18rem 0; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* ── CARD (contenedor de sección) ─────────────────────────── */
.card {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(232,131,158,.18);
  border-radius: var(--r2);
  overflow: visible;
  backdrop-filter: blur(14px);
  box-shadow: 0 3px 18px var(--shadow), 0 1px 3px rgba(255,255,255,.8) inset;
  margin-bottom: 1rem;
  position: relative;
  animation: fadeUp .45s ease both;
}
.card + .card { animation-delay: .07s; }

/* Línea superior decorativa */
.card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--rose), var(--lilac), transparent);
  border-radius: var(--r2) var(--r2) 0 0;
  opacity: .6;
}

.card-body { padding: 1.3rem 1.1rem; }

/* ── SECTION LABEL ─────────────────────────────────────────── */
.sec-label {
  font-family: 'Playfair Display', serif;
  font-size: .95rem; font-style: italic;
  color: var(--text-mid);
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: .65rem;
}
.sec-label::before { content: '✿'; font-size: .65rem; color: var(--rose); font-style: normal; }
.sec-label::after  { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(232,131,158,.3), transparent); }

/* ── FIELD ─────────────────────────────────────────────────── */
.field { margin-bottom: 1.1rem; }
.field:last-child { margin-bottom: 0; }

.field label {
  display: block;
  font-size: .7rem; font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: .42rem;
}
.field label .req { color: var(--err); margin-left: .15rem; }

/* Inputs y textareas */
.field input[type="text"],
.field input[type="number"],
.field input[type="date"],
.field textarea,
.field select {
  width: 100%;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(232,131,158,.25);
  border-radius: var(--r);
  color: var(--ink);
  padding: .65rem .95rem;
  font-size: .88rem;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  -webkit-appearance: none;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(232,131,158,.13);
  background: rgba(255,255,255,.97);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-soft); }
.field textarea { resize: vertical; min-height: 78px; }

/* Input con prefijo */
.input-group { position: relative; }
.input-group .prefix {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--text-soft); pointer-events: none;
  font-size: .85rem; font-weight: 500;
}
.input-group input { padding-left: 2.4rem; }

.hint {
  font-size: .72rem; color: var(--text-soft);
  margin-top: .3rem; font-style: italic;
  transition: color var(--t);
}

/* ── DIVIDER ────────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid rgba(232,131,158,.15);
  margin: 1.1rem 0;
}

/* ── SELECTOR ORIGEN ───────────────────────────────────────── */
.origen-selector {
  display: grid; grid-template-columns: 1fr 1fr; gap: .65rem;
}
.origen-btn {
  padding: .85rem .65rem;
  border-radius: var(--r);
  border: 2px solid rgba(232,131,158,.2);
  background: rgba(255,255,255,.6);
  color: var(--text-soft);
  cursor: pointer; text-align: center;
  transition: all var(--t);
  font-size: .88rem; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.origen-btn .ob-icon  { font-size: 1.5rem; }
.origen-btn .ob-label { font-size: .78rem; letter-spacing: .04em; }
.origen-btn:hover { border-color: var(--rose); background: rgba(249,200,217,.1); }
.origen-btn.selected-shein  {
  border-color: var(--deep-rose);
  background: linear-gradient(135deg, rgba(201,91,122,.12), rgba(249,200,217,.15));
  color: var(--deep-rose);
  box-shadow: 0 0 0 3px rgba(201,91,122,.12), 0 4px 14px rgba(201,91,122,.15);
}
.origen-btn.selected-tiktok {
  border-color: var(--sage);
  background: linear-gradient(135deg, rgba(107,170,154,.12), rgba(212,237,232,.18));
  color: var(--sage);
  box-shadow: 0 0 0 3px rgba(107,170,154,.12), 0 4px 14px rgba(107,170,154,.15);
}

/* ── BUSCADOR CLIENTA ──────────────────────────────────────── */
.cliente-search { position: relative; }
.cliente-results {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0;
  background: rgba(253,246,250,.98);
  border: 1px solid rgba(232,131,158,.28);
  border-radius: var(--r);
  z-index: 100;
  max-height: 200px; overflow-y: auto;
  box-shadow: 0 12px 36px rgba(139,34,82,.15);
  backdrop-filter: blur(16px);
  display: none;
  scrollbar-width: thin; scrollbar-color: rgba(232,131,158,.3) transparent;
}
.cliente-results::-webkit-scrollbar { width: 4px; }
.cliente-results::-webkit-scrollbar-thumb { background: rgba(232,131,158,.3); border-radius: 4px; }
.cliente-item {
  padding: .65rem 1rem;
  cursor: pointer; border-bottom: 1px solid rgba(232,131,158,.1);
  font-size: .86rem;
  transition: background var(--t);
  display: flex; justify-content: space-between; align-items: center;
  gap: .5rem;
}
.cliente-item:last-child { border-bottom: none; }
.cliente-item:hover { background: rgba(249,200,217,.2); }
.cliente-item:active { background: rgba(232,131,158,.15); }
.cliente-item .tel { font-size: .72rem; color: var(--text-soft); }
.cliente-item.nueva { color: var(--deep-rose); font-weight: 600; }

.link-accent {
  font-size: .78rem; color: var(--deep-rose);
  text-decoration: none; font-weight: 500;
}
.link-accent:hover { text-decoration: underline; }

/* ── SECCIÓN IMÁGENES ──────────────────────────────────────── */
.img-section {
  border: 2px dashed rgba(232,131,158,.3);
  border-radius: var(--r2);
  padding: 1.1rem;
  margin-bottom: 1.1rem;
  background: rgba(253,246,240,.4);
  transition: border-color var(--t);
}
.img-section:focus-within { border-color: var(--rose); }

.img-section-title {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem;
  margin-bottom: .9rem;
}
.img-section-title h3 {
  font-family: 'Playfair Display', serif;
  font-size: .95rem; font-style: italic; font-weight: 400;
  color: var(--text-mid);
  display: flex; align-items: center; gap: .4rem;
}
.img-section-title .sub {
  font-size: .7rem; font-weight: 400; font-style: normal;
  color: var(--text-soft);
}

/* Tabs */
.img-tabs {
  display: flex; gap: .45rem; margin-bottom: .9rem;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.img-tabs::-webkit-scrollbar { display: none; }
.img-tab {
  padding: .35rem .85rem; border-radius: 20px; cursor: pointer;
  font-size: .78rem; font-weight: 500; white-space: nowrap;
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(232,131,158,.2);
  color: var(--text-soft); transition: all var(--t);
  -webkit-tap-highlight-color: transparent;
}
.img-tab:hover  { color: var(--deep-rose); border-color: var(--rose); }
.img-tab.active {
  background: linear-gradient(135deg, var(--deep-rose), var(--berry));
  color: #fff; border-color: transparent;
  box-shadow: 0 3px 12px rgba(201,91,122,.3);
}
.img-tab-content         { display: none; }
.img-tab-content.active  { display: block; animation: fadeUp .2s ease; }

/* Drop zone */
.drop-zone {
  border: 2px dashed rgba(232,131,158,.3);
  border-radius: var(--r);
  padding: 1.4rem .8rem;
  text-align: center; cursor: pointer;
  transition: all var(--t);
  background: rgba(255,255,255,.45);
  position: relative; overflow: hidden;
}
.drop-zone::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(249,200,217,.2), rgba(232,213,240,.15));
  opacity: 0; transition: opacity var(--t);
}
.drop-zone:hover::before,
.drop-zone.dragover::before  { opacity: 1; }
.drop-zone:hover,
.drop-zone.dragover {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(232,131,158,.1);
}
.dz-icon  { font-size: 2rem; display: block; margin-bottom: .5rem; }
.drop-zone p  { font-size: .8rem; color: var(--text-soft); margin: .18rem 0; }
.drop-zone strong { color: var(--deep-rose); }

.paste-hint {
  display: flex; align-items: center; gap: .45rem;
  margin-top: .65rem;
  font-size: .73rem; color: var(--text-soft);
  background: rgba(255,255,255,.55);
  border: 1px solid var(--border); border-radius: 10px;
  padding: .5rem .75rem;
}
.kbd {
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(232,131,158,.25);
  border-radius: 5px; padding: .1rem .38rem;
  font-family: monospace; font-size: .72rem;
  color: var(--text-mid);
}

/* Cámara */
.cam-wrap {
  background: var(--ink); border-radius: var(--r);
  overflow: hidden; min-height: 120px;
  display: flex; align-items: center; justify-content: center;
}
.cam-wrap video { width: 100%; max-height: 240px; object-fit: cover; display: block; }
.cam-placeholder { color: var(--text-soft); font-size: .82rem; text-align: center; padding: 1.5rem; }
.cam-controls { display: flex; gap: .5rem; margin-top: .65rem; flex-wrap: wrap; }

/* ── TARJETAS DE ARTÍCULO ──────────────────────────────────── */
.articulos-lista {
  display: flex; flex-direction: column; gap: .65rem;
  margin-top: .85rem;
}
.articulo-card {
  background: rgba(255,255,255,.8);
  border: 1.5px solid rgba(232,131,158,.2);
  border-radius: var(--r);
  overflow: hidden;
  display: flex; align-items: stretch;
  transition: border-color var(--t), box-shadow var(--t);
  animation: fadeUp .3s ease both;
}
.articulo-card.procesando {
  border-color: rgba(181,142,196,.5);
  animation: pulso 1.4s ease-in-out infinite;
}
.articulo-card.listo       { border-color: var(--sage); }
.articulo-card.sin-precio  { border-color: var(--warn); }

@keyframes pulso {
  0%,100% { box-shadow: 0 0 0 0 rgba(181,142,196,.2); }
  50%      { box-shadow: 0 0 0 6px rgba(181,142,196,.05); }
}

.articulo-thumb {
  width: 86px; flex-shrink: 0;
  background: rgba(249,200,217,.15);
  overflow: hidden;
}
.articulo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.articulo-info {
  flex: 1; padding: .65rem .85rem;
  display: flex; flex-direction: column; gap: .38rem;
}
.articulo-nombre {
  font-size: .82rem; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
}

/* Badges IA */
.ia-badge {
  font-size: .62rem; padding: .13rem .42rem;
  border-radius: 20px; font-weight: 700; white-space: nowrap;
}
.ia-badge.ok   { background: rgba(107,170,154,.15); color: var(--sage); border: 1px solid rgba(107,170,154,.3); }
.ia-badge.warn { background: rgba(201,135,58,.12);  color: var(--warn); border: 1px solid rgba(201,135,58,.3); }
.ia-badge.spin {
  background: rgba(181,142,196,.15); color: var(--plum); border: 1px solid rgba(181,142,196,.3);
  animation: blink .9s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

.precio-ia-wrap {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
}
.precio-ia-label { font-size: .72rem; color: var(--text-soft); white-space: nowrap; }
.precio-ia-input {
  width: 108px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(232,131,158,.25);
  border-radius: 8px;
  color: var(--ink); padding: .35rem .6rem;
  font-size: .9rem; font-weight: 700;
  font-family: 'Playfair Display', serif;
  outline: none; transition: border-color var(--t), box-shadow var(--t);
  -webkit-appearance: none;
}
.precio-ia-input:focus    { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(232,131,158,.1); }
.precio-ia-input.detectado { border-color: var(--sage); color: var(--sage); }
.precio-ia-input.manual    { border-color: var(--warm-gold); color: var(--gold); }

.articulo-acciones { display: flex; gap: .35rem; align-items: center; margin-top: .15rem; }

.btn-quitar {
  background: none; border: none; color: var(--text-soft);
  cursor: pointer; font-size: .73rem;
  padding: .22rem .5rem; border-radius: 6px;
  transition: all var(--t); font-family: 'DM Sans', sans-serif;
}
.btn-quitar:hover { background: rgba(217,79,114,.1); color: var(--err); }

.btn-retry {
  background: none;
  border: 1px solid rgba(232,131,158,.25);
  color: var(--text-soft); cursor: pointer;
  font-size: .72rem; padding: .22rem .5rem;
  border-radius: 6px; transition: all var(--t);
  font-family: 'DM Sans', sans-serif;
}
.btn-retry:hover { border-color: var(--rose); color: var(--deep-rose); }

/* ── TOTAL RESUMEN ─────────────────────────────────────────── */
.total-resumen {
  background: linear-gradient(135deg, rgba(107,170,154,.1), rgba(181,142,196,.08));
  border: 1px solid rgba(107,170,154,.3);
  border-radius: var(--r);
  padding: .9rem 1rem;
  margin-top: .75rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .65rem;
  animation: fadeUp .3s ease;
}
.t-label     { font-size: .72rem; color: var(--text-soft); font-style: italic; }
.t-articulos { font-size: .72rem; color: var(--text-soft); margin-top: .1rem; }
.t-valor {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem; font-weight: 700; color: var(--sage);
  line-height: 1;
}

.btn-aplicar-total {
  background: linear-gradient(135deg, var(--sage), #4e9a8a);
  color: #fff; border: none; border-radius: 25px;
  padding: .45rem 1.1rem; font-size: .8rem; font-weight: 600;
  cursor: pointer; transition: all var(--t);
  font-family: 'DM Sans', sans-serif; white-space: nowrap;
  box-shadow: 0 3px 12px rgba(107,170,154,.3);
  -webkit-tap-highlight-color: transparent;
}
.btn-aplicar-total:hover  { filter: brightness(1.08); transform: translateY(-1px); }
.btn-aplicar-total:active { transform: scale(.96); }

/* ── BOTONES GENERALES ─────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .65rem 1.2rem; border-radius: var(--r3);
  font-size: .85rem; font-weight: 500;
  cursor: pointer; border: none;
  text-decoration: none; transition: all var(--t);
  font-family: 'DM Sans', sans-serif; letter-spacing: .02em;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--deep-rose) 0%, var(--berry) 100%);
  color: #fff;
  box-shadow: 0 5px 18px rgba(201,91,122,.32), 0 2px 5px rgba(139,34,82,.2);
}
.btn-primary:hover  { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,91,122,.42); }
.btn-primary:active { transform: scale(.97); }

.btn-ghost {
  background: rgba(255,255,255,.6);
  color: var(--text-mid);
  border: 1px solid rgba(232,131,158,.25);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover  { color: var(--deep-rose); border-color: var(--rose); background: rgba(232,131,158,.08); }
.btn-ghost:active { transform: scale(.97); }

.btn-sm { padding: .38rem .85rem; font-size: .78rem; }

/* ── BARRA DE ACCIONES (footer form) ───────────────────────── */
.actions {
  display: flex; gap: .65rem;
  margin-top: 1.4rem; flex-wrap: wrap;
  position: sticky; bottom: .8rem; z-index: 10;
}
.actions .btn-primary { flex: 1; }
.actions .btn-ghost   { flex-shrink: 0; }

/* Sombra cuando está sticky */
.actions::before {
  content: '';
  position: absolute; inset: -.8rem -1rem;
  background: linear-gradient(to top, rgba(253,246,240,.95) 60%, transparent);
  z-index: -1; pointer-events: none;
  border-radius: 0 0 var(--r2) var(--r2);
}

/* ── BOTÓN GUARDAR LOADING ─────────────────────────────────── */
.btn-primary.loading {
  pointer-events: none; opacity: .75;
  position: relative; overflow: hidden;
}
.btn-primary.loading::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  animation: shimmer 1s linear infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ── ANIMACIONES ───────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── TOAST ─────────────────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: .5rem;
  width: 90vw; max-width: 340px;
  pointer-events: none;
}
.toast {
  background: rgba(45,21,32,.92); backdrop-filter: blur(14px);
  border: 1px solid rgba(232,131,158,.25);
  color: rgba(255,255,255,.9); border-radius: 30px;
  padding: .65rem 1.3rem; font-size: .8rem; font-weight: 500;
  text-align: center; width: 100%;
  box-shadow: 0 8px 24px rgba(45,21,32,.3);
  animation: toastIn .25s ease;
  pointer-events: auto;
}
.toast.success { border-color: rgba(107,170,154,.4); color: #c0e8e0; }
.toast.error   { border-color: rgba(217,79,114,.4);  color: #f0b0c0; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — Ajustes para pantallas medianas y grandes
════════════════════════════════════════════════════════════ */
@media (min-width: 480px) {
  .page-wrap     { padding: 1.5rem 1.3rem 4rem; }
  .card-body     { padding: 1.5rem 1.3rem; }
  .page-header h1 { font-size: 1.75rem; }
}

@media (min-width: 640px) {
  .page-wrap { padding: 2rem 1.5rem 4rem; }
  .card-body { padding: 1.75rem 1.5rem; }
  .actions   { position: static; }
  .actions::before { display: none; }
  .actions .btn-primary { flex: unset; min-width: 160px; }
}

/* ═══════════════════════════════════════════════════════════════
   clientes.css — Complemento floral para formularios de clientes
   Extiende nuevo-pedido.css con los elementos faltantes
═══════════════════════════════════════════════════════════════ */

/* ── Tipos de input faltantes en .field ────────────────────── */
.field input[type="tel"],
.field input[type="email"],
.field input[type="search"],
.field input[type="url"],
.field input[type="password"] {
  width: 100%;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(232,131,158,.25);
  border-radius: var(--r);
  color: var(--ink);
  padding: .65rem .95rem;
  font-size: .88rem;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  -webkit-appearance: none;
}
.field input[type="tel"]:focus,
.field input[type="email"]:focus,
.field input[type="search"]:focus,
.field input[type="url"]:focus,
.field input[type="password"]:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(232,131,158,.13);
  background: rgba(255,255,255,.97);
}
.field input[type="tel"]::placeholder,
.field input[type="email"]::placeholder,
.field input[type="search"]::placeholder,
.field input[type="url"]::placeholder,
.field input[type="password"]::placeholder {
  color: var(--text-soft);
}

/* Input con prefijo emoji — ajuste para íconos más anchos */
.input-group .prefix-emoji {
  position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  font-size: 1rem; pointer-events: none; line-height: 1;
}
.input-group input.with-emoji { padding-left: 2.5rem; }

/* ── Subtítulo de página (.subtitle) ───────────────────────── */
.subtitle {
  font-size: .78rem; color: var(--text-soft);
  margin-top: .3rem; margin-bottom: 1.2rem;
  font-style: italic;
  display: flex; align-items: center; gap: .4rem;
}
.subtitle::before { content: '✿'; color: var(--rose); font-style: normal; font-size: .65rem; }

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb {
  font-size: .78rem; color: var(--text-soft);
  margin-bottom: .65rem;
  display: flex; align-items: center; gap: .35rem;
}
.breadcrumb a {
  color: var(--deep-rose); text-decoration: none; font-weight: 500;
  transition: color var(--t);
}
.breadcrumb a:hover { color: var(--berry); text-decoration: underline; }
.breadcrumb::before { content: '✿'; font-size: .6rem; color: var(--rose); }

/* ── Flash message (éxito tras redirección) ─────────────────── */
.flash-success {
  background: linear-gradient(135deg, rgba(107,170,154,.12), rgba(212,237,232,.1));
  border: 1px solid rgba(107,170,154,.35); border-left: 3px solid var(--sage);
  border-radius: var(--r); padding: .85rem 1.1rem;
  margin-bottom: 1.2rem; font-size: .82rem; color: #2e6b5e;
  display: flex; align-items: center; gap: .6rem;
  animation: fadeUp .35s ease;
}
.flash-error {
  background: linear-gradient(135deg, rgba(217,79,114,.1), rgba(248,200,218,.08));
  border: 1px solid rgba(217,79,114,.3); border-left: 3px solid var(--err);
  border-radius: var(--r); padding: .85rem 1.1rem;
  margin-bottom: 1.2rem; font-size: .82rem; color: #9b3050;
  display: flex; align-items: center; gap: .6rem;
  animation: shake .35s ease;
}

/* ── Tabla de listado (index de clientes) ───────────────────── */
.table-wrap {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(232,131,158,.18);
  border-radius: var(--r2);
  overflow: hidden;
  backdrop-filter: blur(14px);
  box-shadow: 0 3px 18px var(--shadow);
  margin-bottom: 1rem;
  position: relative;
}
.table-wrap::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--rose), var(--lilac), transparent);
  opacity: .6;
}
.table-head {
  padding: .9rem 1.25rem;
  background: linear-gradient(135deg, rgba(249,200,217,.2), rgba(232,213,240,.15));
  border-bottom: 1px solid rgba(232,131,158,.12);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem;
}
.table-head h2 {
  font-family: 'Playfair Display', serif;
  font-size: .95rem; font-style: italic; font-weight: 400;
  color: var(--text-mid);
  display: flex; align-items: center; gap: .45rem;
}
.table-head h2::before { content: '✿'; font-size: .6rem; color: var(--rose); }

table {
  width: 100%; border-collapse: collapse;
  font-size: .84rem;
}
thead th {
  padding: .65rem 1.1rem;
  font-size: .66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-soft);
  border-bottom: 1px solid rgba(232,131,158,.12);
  text-align: left; background: rgba(253,246,240,.5);
}
tbody tr {
  border-bottom: 1px solid rgba(232,131,158,.08);
  transition: background var(--t);
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: rgba(249,200,217,.1); }
tbody td {
  padding: .75rem 1.1rem;
  color: var(--ink); vertical-align: middle;
}
.td-muted { color: var(--text-soft); font-size: .78rem; }
.td-actions { display: flex; gap: .3rem; align-items: center; }

/* Botones de acción en tabla */
.btn-table {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .28rem .7rem; border-radius: 20px;
  font-size: .72rem; font-weight: 500;
  text-decoration: none; cursor: pointer; border: none;
  transition: all var(--t); font-family: 'DM Sans', sans-serif;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.btn-table-edit {
  background: rgba(232,131,158,.1); color: var(--deep-rose);
  border: 1px solid rgba(232,131,158,.25);
}
.btn-table-edit:hover { background: rgba(232,131,158,.2); border-color: var(--rose); }
.btn-table-danger {
  background: rgba(217,79,114,.08); color: var(--err);
  border: 1px solid rgba(217,79,114,.2);
}
.btn-table-danger:hover { background: rgba(217,79,114,.18); border-color: var(--err); }
.btn-table-view {
  background: rgba(181,142,196,.1); color: var(--plum);
  border: 1px solid rgba(181,142,196,.25);
}
.btn-table-view:hover { background: rgba(181,142,196,.2); border-color: var(--lilac); }

/* ── Barra de búsqueda / filtro superior ────────────────────── */
.filtro-bar {
  display: flex; gap: .55rem; align-items: center;
  flex-wrap: wrap; margin-bottom: 1rem;
}
.filtro-bar input[type="text"],
.filtro-bar input[type="search"] {
  flex: 1; min-width: 180px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(232,131,158,.25);
  border-radius: 30px;
  color: var(--ink); padding: .5rem 1rem;
  font-size: .82rem; font-family: 'DM Sans', sans-serif;
  outline: none; transition: all var(--t);
  -webkit-appearance: none;
}
.filtro-bar input:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(232,131,158,.1);
  background: rgba(255,255,255,.95);
}
.filtro-bar input::placeholder { color: var(--text-soft); }

/* ── Badge de conteo ────────────────────────────────────────── */
.badge-count {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(232,131,158,.18), rgba(181,142,196,.12));
  border: 1px solid rgba(232,131,158,.28);
  color: var(--deep-rose);
  font-size: .65rem; font-weight: 700;
  border-radius: 20px; padding: .12rem .5rem;
  min-width: 1.4rem;
}

/* ── Estado vacío (sin resultados) ─────────────────────────── */
.empty-state {
  text-align: center; padding: 3rem 1rem;
  color: var(--text-soft); font-style: italic; font-size: .85rem;
}
.empty-state .es-icon { font-size: 2.5rem; display: block; margin-bottom: .75rem; opacity: .3; }
.empty-state .es-title {
  font-family: 'Playfair Display', serif;
  font-size: 1rem; font-style: italic;
  color: var(--text-mid); margin-bottom: .3rem;
}

/* ── Paginación ─────────────────────────────────────────────── */
.pagination {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  margin-top: 1.2rem; flex-wrap: wrap;
}
.page-btn {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 500; text-decoration: none;
  border: 1px solid rgba(232,131,158,.22);
  background: rgba(255,255,255,.6); color: var(--text-mid);
  transition: all var(--t); cursor: pointer;
}
.page-btn:hover { border-color: var(--rose); color: var(--deep-rose); background: rgba(232,131,158,.08); }
.page-btn.active {
  background: linear-gradient(135deg, var(--deep-rose), var(--berry));
  color: #fff; border-color: transparent;
  box-shadow: 0 3px 12px rgba(201,91,122,.28);
}

/* ── Responsive específico ──────────────────────────────────── */
@media (max-width: 480px) {
  table { font-size: .78rem; }
  thead th, tbody td { padding: .55rem .75rem; }
  .td-actions { flex-wrap: wrap; gap: .2rem; }
  .btn-table  { padding: .24rem .55rem; font-size: .68rem; }
}


/* ═══════════════════════════════════════════════════════════════
   clientes.css — Sistema floral completo para módulo clientes
   Extiende nuevo-pedido.css  ·  Mobile-first
═══════════════════════════════════════════════════════════════ */

/* ── Tipos de input faltantes en .field ────────────────────── */
.field input[type="tel"],
.field input[type="email"],
.field input[type="search"],
.field input[type="url"],
.field input[type="password"] {
  width: 100%;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(232,131,158,.25);
  border-radius: var(--r);
  color: var(--ink);
  padding: .65rem .95rem;
  font-size: .88rem;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  -webkit-appearance: none;
}
.field input[type="tel"]:focus,
.field input[type="email"]:focus,
.field input[type="search"]:focus,
.field input[type="url"]:focus,
.field input[type="password"]:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(232,131,158,.13);
  background: rgba(255,255,255,.97);
}
.field input[type="tel"]::placeholder,
.field input[type="email"]::placeholder,
.field input[type="search"]::placeholder,
.field input[type="url"]::placeholder,
.field input[type="password"]::placeholder { color: var(--text-soft); }

/* ── Subtítulo de página ────────────────────────────────────── */
.subtitle {
  font-size: .78rem; color: var(--text-soft);
  margin-top: .3rem; margin-bottom: 1.2rem;
  font-style: italic;
  display: flex; align-items: center; gap: .4rem;
}
.subtitle::before { content: '✿'; color: var(--rose); font-style: normal; font-size: .65rem; }

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb {
  font-size: .78rem; color: var(--text-soft);
  margin-bottom: .65rem;
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
}
.breadcrumb a {
  color: var(--deep-rose); text-decoration: none; font-weight: 500;
  transition: color var(--t);
}
.breadcrumb a:hover { color: var(--berry); text-decoration: underline; }
.breadcrumb::before { content: '✿'; font-size: .6rem; color: var(--rose); flex-shrink: 0; }

/* ── Flash messages ─────────────────────────────────────────── */
.flash-success {
  background: linear-gradient(135deg, rgba(107,170,154,.12), rgba(212,237,232,.1));
  border: 1px solid rgba(107,170,154,.35); border-left: 3px solid var(--sage);
  border-radius: var(--r); padding: .85rem 1.1rem;
  margin-bottom: 1.2rem; font-size: .82rem; color: #2e6b5e;
  display: flex; align-items: center; gap: .6rem;
  animation: fadeUp .35s ease;
}
.flash-error {
  background: linear-gradient(135deg, rgba(217,79,114,.1), rgba(248,200,218,.08));
  border: 1px solid rgba(217,79,114,.3); border-left: 3px solid var(--err);
  border-radius: var(--r); padding: .85rem 1.1rem;
  margin-bottom: 1.2rem; font-size: .82rem; color: #9b3050;
  display: flex; align-items: center; gap: .6rem;
  animation: shake .35s ease;
}

/* ════════════════════════════════════════════════════════════
   TABLA — index.php (desktop)
════════════════════════════════════════════════════════════ */
.table-wrap {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(232,131,158,.18);
  border-radius: var(--r2);
  overflow: hidden;
  backdrop-filter: blur(14px);
  box-shadow: 0 3px 18px var(--shadow);
  margin-bottom: 1rem;
  position: relative;
}
.table-wrap::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--rose), var(--lilac), transparent);
  opacity: .6;
}
.table-head {
  padding: .9rem 1.25rem;
  background: linear-gradient(135deg, rgba(249,200,217,.2), rgba(232,213,240,.15));
  border-bottom: 1px solid rgba(232,131,158,.12);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem;
}
.table-head h2 {
  font-family: 'Playfair Display', serif;
  font-size: .95rem; font-style: italic; font-weight: 400;
  color: var(--text-mid);
  display: flex; align-items: center; gap: .45rem;
}
.table-head h2::before { content: '✿'; font-size: .6rem; color: var(--rose); }

table { width: 100%; border-collapse: collapse; font-size: .84rem; }
thead th {
  padding: .65rem 1.1rem;
  font-size: .66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-soft); text-align: left;
  border-bottom: 1px solid rgba(232,131,158,.12);
  background: rgba(253,246,240,.5);
}
tbody tr {
  border-bottom: 1px solid rgba(232,131,158,.08);
  transition: background var(--t);
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover      { background: rgba(249,200,217,.1); }
tbody td { padding: .75rem 1.1rem; color: var(--ink); vertical-align: middle; }
.td-muted   { color: var(--text-soft); font-size: .78rem; }
.td-actions { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.td-id      { font-family: monospace; font-size: .68rem; color: var(--text-soft); }
.td-desc    { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-total   { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--ink); }

/* ── Avatar inicial ─────────────────────────────────────────── */
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--petal), var(--lavender));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 1rem; font-weight: 700; color: var(--deep-rose);
  border: 2px solid rgba(232,131,158,.25);
  box-shadow: 0 2px 8px rgba(139,34,82,.1);
  transition: transform var(--t), box-shadow var(--t);
}
tr:hover .avatar {
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(139,34,82,.15);
}

/* Celda nombre + avatar */
.nombre-cell { display: flex; align-items: center; gap: .7rem; }
.nombre-cell .n-name  { font-weight: 600; font-size: .88rem; color: var(--ink); }
.nombre-cell .n-email { font-size: .72rem; color: var(--text-soft); margin-top: .08rem; }

/* Badge pedidos activos */
.badge-activos {
  display: inline-flex; align-items: center;
  background: linear-gradient(135deg, rgba(201,91,122,.12), rgba(249,200,217,.15));
  border: 1px solid rgba(201,91,122,.25);
  color: var(--deep-rose);
  font-size: .62rem; font-weight: 700;
  border-radius: 20px; padding: .1rem .45rem;
  margin-left: .3rem; white-space: nowrap;
}

/* Botón WhatsApp */
.btn-wa {
  background: linear-gradient(135deg, rgba(37,211,102,.15), rgba(37,211,102,.08));
  border: 1px solid rgba(37,211,102,.3);
  color: #1a8f47; border-radius: 20px; padding: .28rem .7rem;
  font-size: .75rem; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: .25rem;
  transition: all var(--t); white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn-wa:hover {
  background: linear-gradient(135deg, rgba(37,211,102,.28), rgba(37,211,102,.18));
  border-color: rgba(37,211,102,.5); transform: translateY(-1px);
}
/* Variante de ancho completo (ver.php) */
.btn-wa-full {
  background: linear-gradient(135deg, rgba(37,211,102,.15), rgba(37,211,102,.08));
  border: 1px solid rgba(37,211,102,.3); color: #1a8f47;
}
.btn-wa-full:hover {
  background: linear-gradient(135deg, rgba(37,211,102,.28), rgba(37,211,102,.18));
  transform: translateY(-1px);
}

/* ── Botones de acción en tabla ─────────────────────────────── */
.btn-table {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .28rem .7rem; border-radius: 20px;
  font-size: .72rem; font-weight: 500;
  text-decoration: none; cursor: pointer; border: none;
  transition: all var(--t); font-family: 'DM Sans', sans-serif;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.btn-table-edit {
  background: rgba(232,131,158,.1); color: var(--deep-rose);
  border: 1px solid rgba(232,131,158,.25);
}
.btn-table-edit:hover   { background: rgba(232,131,158,.2); border-color: var(--rose); }
.btn-table-danger {
  background: rgba(217,79,114,.08); color: var(--err);
  border: 1px solid rgba(217,79,114,.2);
}
.btn-table-danger:hover { background: rgba(217,79,114,.18); border-color: var(--err); }
.btn-table-view {
  background: rgba(181,142,196,.1); color: var(--plum);
  border: 1px solid rgba(181,142,196,.25);
}
.btn-table-view:hover   { background: rgba(181,142,196,.2); border-color: var(--lilac); }

/* ── Barra de búsqueda ──────────────────────────────────────── */
.filtro-bar {
  display: flex; gap: .55rem; align-items: center;
  flex-wrap: wrap; margin-bottom: 1rem;
}
.filtro-bar input[type="text"],
.filtro-bar input[type="search"] {
  flex: 1; min-width: 180px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(232,131,158,.25);
  border-radius: 30px; color: var(--ink);
  padding: .5rem 1rem; font-size: .82rem;
  font-family: 'DM Sans', sans-serif;
  outline: none; transition: all var(--t); -webkit-appearance: none;
}
.filtro-bar input:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(232,131,158,.1);
  background: rgba(255,255,255,.95);
}
.filtro-bar input::placeholder { color: var(--text-soft); }

/* ── Badge de conteo ────────────────────────────────────────── */
.badge-count {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(232,131,158,.18), rgba(181,142,196,.12));
  border: 1px solid rgba(232,131,158,.28); color: var(--deep-rose);
  font-size: .65rem; font-weight: 700;
  border-radius: 20px; padding: .12rem .5rem; min-width: 1.4rem;
}

/* ── Estado vacío ───────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 3rem 1rem;
  color: var(--text-soft); font-style: italic; font-size: .85rem;
}
.empty-state .es-icon  { font-size: 2.5rem; display: block; margin-bottom: .75rem; opacity: .3; }
.empty-state .es-title {
  font-family: 'Playfair Display', serif;
  font-size: 1rem; font-style: italic;
  color: var(--text-mid); margin-bottom: .3rem;
}

/* ── Contador de resultados ─────────────────────────────────── */
.result-count {
  font-size: .76rem; color: var(--text-soft); font-style: italic;
  margin-bottom: .65rem;
  display: flex; align-items: center; gap: .35rem;
}
.result-count::before { content: '✿'; color: var(--rose); font-size: .6rem; font-style: normal; }

/* ── Paginación ─────────────────────────────────────────────── */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: .4rem; margin-top: 1.2rem; flex-wrap: wrap;
}
.page-btn {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 500; text-decoration: none;
  border: 1px solid rgba(232,131,158,.22);
  background: rgba(255,255,255,.6); color: var(--text-mid);
  transition: all var(--t); cursor: pointer;
}
.page-btn:hover {
  border-color: var(--rose); color: var(--deep-rose);
  background: rgba(232,131,158,.08);
}
.page-btn.active {
  background: linear-gradient(135deg, var(--deep-rose), var(--berry));
  color: #fff; border-color: transparent;
  box-shadow: 0 3px 12px rgba(201,91,122,.28);
}

/* ════════════════════════════════════════════════════════════
   TARJETAS MÓVIL — index.php
════════════════════════════════════════════════════════════ */
.cliente-cards { display: none; flex-direction: column; gap: .7rem; }
.cliente-card {
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(232,131,158,.18);
  border-radius: var(--r2);
  padding: 1rem 1.05rem;
  display: flex; flex-direction: column; gap: .65rem;
  position: relative; overflow: hidden;
  box-shadow: 0 2px 12px var(--shadow);
  animation: fadeUp .35s ease both;
  transition: box-shadow var(--t), border-color var(--t);
}
.cliente-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--rose), var(--lilac), transparent);
  opacity: .55;
}
.cliente-card:hover {
  border-color: rgba(232,131,158,.35);
  box-shadow: 0 6px 22px rgba(139,34,82,.12);
}
.cc-top { display: flex; align-items: center; gap: .75rem; }
.cc-top .avatar { width: 44px; height: 44px; font-size: 1.1rem; }
.cc-top .cc-meta { flex: 1; min-width: 0; }
.cc-top .cc-name {
  font-family: 'Playfair Display', serif;
  font-size: 1rem; font-weight: 400; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-top .cc-tel {
  font-size: .76rem; color: var(--text-soft); margin-top: .08rem;
  display: flex; align-items: center; gap: .25rem;
}
.cc-top .cc-tel::before { content: '📱'; font-size: .7rem; }
.cc-stats { display: flex; gap: .55rem; flex-wrap: wrap; }
.cc-stat {
  background: rgba(253,246,240,.8);
  border: 1px solid rgba(232,131,158,.15);
  border-radius: 10px; padding: .35rem .7rem;
  font-size: .72rem; color: var(--text-mid);
  display: flex; align-items: center; gap: .3rem;
}
.cc-stat strong { color: var(--ink); font-size: .82rem; }
.cc-actions { display: flex; gap: .45rem; flex-wrap: wrap; }
.cc-actions a {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  padding: .45rem .6rem; border-radius: 20px;
  font-size: .78rem; font-weight: 500; text-decoration: none;
  transition: all var(--t); -webkit-tap-highlight-color: transparent;
}
.cc-actions .a-ver    { background: rgba(181,142,196,.1); color: var(--plum);      border: 1px solid rgba(181,142,196,.25); }
.cc-actions .a-ver:hover    { background: rgba(181,142,196,.2); border-color: var(--lilac); }
.cc-actions .a-editar { background: rgba(232,131,158,.1); color: var(--deep-rose); border: 1px solid rgba(232,131,158,.22); }
.cc-actions .a-editar:hover { background: rgba(232,131,158,.2); border-color: var(--rose); }
.cc-actions .a-wa     { background: rgba(37,211,102,.12);  color: #1a8f47;         border: 1px solid rgba(37,211,102,.25); }
.cc-actions .a-wa:hover     { background: rgba(37,211,102,.24); }

/* ════════════════════════════════════════════════════════════
   PERFIL — ver.php
════════════════════════════════════════════════════════════ */
.perfil-hero {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(232,131,158,.18);
  border-radius: var(--r2);
  overflow: hidden;
  backdrop-filter: blur(14px);
  box-shadow: 0 3px 18px var(--shadow);
  margin-bottom: 1rem;
  position: relative;
  animation: fadeUp .4s ease both;
}
.perfil-hero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--rose), var(--lilac), transparent);
  z-index: 2; opacity: .7;
}
.perfil-banner {
  height: 72px;
  background: linear-gradient(135deg,
    rgba(249,200,217,.7) 0%,
    rgba(232,213,240,.6) 50%,
    rgba(212,237,232,.5) 100%);
  position: relative;
}
.perfil-banner::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cellipse cx='30' cy='20' rx='4' ry='8' fill='%23f9c8d9' opacity='.2'/%3E%3Cellipse cx='30' cy='20' rx='4' ry='8' fill='%23f9c8d9' opacity='.2' transform='rotate(72 30 30)'/%3E%3Cellipse cx='30' cy='20' rx='4' ry='8' fill='%23f9c8d9' opacity='.2' transform='rotate(144 30 30)'/%3E%3Cellipse cx='30' cy='20' rx='4' ry='8' fill='%23f9c8d9' opacity='.2' transform='rotate(216 30 30)'/%3E%3Cellipse cx='30' cy='20' rx='4' ry='8' fill='%23f9c8d9' opacity='.2' transform='rotate(288 30 30)'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}
.perfil-body { padding: 0 1.25rem 1.35rem; }
.perfil-avatar-wrap {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-top: -28px; margin-bottom: .85rem;
}
.perfil-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--petal), var(--lavender));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem; font-weight: 700; color: var(--deep-rose);
  border: 3px solid rgba(255,255,255,.9);
  box-shadow: 0 4px 16px rgba(139,34,82,.18);
  position: relative; z-index: 1;
}
.perfil-quick-actions { display: flex; gap: .4rem; padding-bottom: .2rem; }
.perfil-nombre {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem; font-weight: 400; color: var(--ink);
  margin-bottom: .5rem; line-height: 1.2;
}
.perfil-nombre em {
  font-style: italic;
  background: linear-gradient(135deg, var(--deep-rose), var(--lilac));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.info-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.info-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(232,131,158,.2);
  border-radius: 20px; padding: .28rem .75rem;
  font-size: .76rem; color: var(--text-mid);
  backdrop-filter: blur(6px);
}
.info-pill .pi { font-size: .85rem; }
.perfil-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .55rem; margin-bottom: 1.1rem;
}
.pstat {
  background: rgba(253,246,240,.8);
  border: 1px solid rgba(232,131,158,.15);
  border-radius: var(--r);
  padding: .7rem .6rem; text-align: center;
  position: relative; overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
}
.pstat:hover { transform: translateY(-2px); box-shadow: 0 5px 16px var(--shadow); }
.pstat::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
}
.pstat-rose::before  { background: linear-gradient(90deg, transparent, var(--rose),  transparent); }
.pstat-sage::before  { background: linear-gradient(90deg, transparent, var(--sage),  transparent); }
.pstat-lilac::before { background: linear-gradient(90deg, transparent, var(--lilac), transparent); }
.pstat-val {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem; font-weight: 700; line-height: 1; margin-bottom: .22rem;
}
.pstat-rose  .pstat-val { color: var(--deep-rose); }
.pstat-sage  .pstat-val { color: var(--sage); }
.pstat-lilac .pstat-val { color: var(--plum); }
.pstat-lbl { font-size: .65rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .08em; }
.perfil-main-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.perfil-main-actions .btn { flex: 1; min-width: 100px; }

/* ── Historial de pedidos ────────────────────────────────────── */
.historial-wrap {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(232,131,158,.18);
  border-radius: var(--r2);
  overflow: hidden; backdrop-filter: blur(14px);
  box-shadow: 0 3px 18px var(--shadow);
  position: relative; animation: fadeUp .5s ease both;
}
.historial-wrap::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--rose), var(--lilac), transparent);
  opacity: .55;
}
.historial-head {
  padding: .95rem 1.25rem;
  background: linear-gradient(135deg, rgba(249,200,217,.18), rgba(232,213,240,.12));
  border-bottom: 1px solid rgba(232,131,158,.1);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.historial-head h2 {
  font-family: 'Playfair Display', serif;
  font-size: .95rem; font-style: italic; font-weight: 400; color: var(--text-mid);
  display: flex; align-items: center; gap: .45rem;
}
.historial-head h2::before { content: '✿'; font-size: .6rem; color: var(--rose); }

.historial-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.historial-table thead th {
  padding: .6rem 1rem; font-size: .65rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-soft); text-align: left;
  border-bottom: 1px solid rgba(232,131,158,.1);
  background: rgba(253,246,240,.4);
}
.historial-table tbody tr {
  border-bottom: 1px solid rgba(232,131,158,.07);
  transition: background var(--t);
}
.historial-table tbody tr:last-child { border-bottom: none; }
.historial-table tbody tr:hover { background: rgba(249,200,217,.08); }
.historial-table tbody td { padding: .7rem 1rem; vertical-align: middle; }

/* Badges de estado */
.badge-estado {
  display: inline-flex; align-items: center;
  font-size: .64rem; font-weight: 700;
  border-radius: 20px; padding: .14rem .5rem; white-space: nowrap;
}
.badge-pend  { background: rgba(212,168,83,.12);  color: #9a7020;      border: 1px solid rgba(212,168,83,.3); }
.badge-listo { background: rgba(107,170,154,.12); color: var(--sage);  border: 1px solid rgba(107,170,154,.3); }
.badge-entre { background: rgba(181,142,196,.12); color: var(--plum);  border: 1px solid rgba(181,142,196,.3); }

/* Badges de origen pequeños */
.badge-origen-sm {
  display: inline-flex; font-size: .6rem; font-weight: 700;
  border-radius: 8px; padding: .1rem .38rem;
}
.badge-shein  { background: rgba(201,91,122,.1);  color: var(--deep-rose); border: 1px solid rgba(201,91,122,.22); }
.badge-tiktok { background: rgba(107,170,154,.1); color: var(--sage);      border: 1px solid rgba(107,170,154,.22); }

/* Tarjetas de pedido (móvil) */
.pedido-cards { display: none; flex-direction: column; }
.pedido-card {
  padding: .9rem 1.1rem;
  border-bottom: 1px solid rgba(232,131,158,.09);
  transition: background var(--t);
}
.pedido-card:last-child { border-bottom: none; }
.pedido-card:hover { background: rgba(249,200,217,.07); }
.pc-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .45rem; gap: .5rem;
}
.pc-id    { font-family: monospace; font-size: .68rem; color: var(--text-soft); }
.pc-total { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; color: var(--ink); }
.pc-desc  { font-size: .8rem; color: var(--ink); margin-bottom: .45rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-meta  { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pc-fecha { font-size: .7rem; color: var(--text-soft); margin-left: auto; }
.td-empty-hist {
  text-align: center; padding: 2.5rem 1rem;
  color: var(--text-soft); font-style: italic; font-size: .82rem;
}
.td-empty-hist span { font-size: 1.8rem; display: block; margin-bottom: .5rem; opacity: .3; }

/* ════════════════════════════════════════════════════════════
   EDITAR CLIENTA — editar.php
════════════════════════════════════════════════════════════ */
.form-avatar-wrap {
  display: flex; align-items: center; gap: .85rem;
  background: linear-gradient(135deg, rgba(249,200,217,.2), rgba(232,213,240,.15));
  border-bottom: 1px solid rgba(232,131,158,.12);
  padding: 1.1rem 1.1rem .9rem;
  border-radius: var(--r2) var(--r2) 0 0;
  margin: -1.3rem -1.1rem 1.2rem;
}
.form-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--petal), var(--lavender));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem; font-weight: 700; color: var(--deep-rose);
  border: 2px solid rgba(232,131,158,.3);
  box-shadow: 0 3px 12px rgba(139,34,82,.12);
}
.form-avatar-info .fa-name {
  font-family: 'Playfair Display', serif;
  font-size: .95rem; font-style: italic; color: var(--ink);
}
.form-avatar-info .fa-sub {
  font-size: .7rem; color: var(--text-soft);
  margin-top: .08rem; font-style: italic;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* index: ocultar tabla, mostrar tarjetas */
  .table-wrap    { display: none; }
  .cliente-cards { display: flex; }

  /* ver: ocultar tabla historial, mostrar tarjetas */
  .historial-table,
  .historial-table thead { display: none; }
  .pedido-cards          { display: flex; }

  /* Perfil stats compacto */
  .perfil-stats { gap: .4rem; }
  .pstat-val    { font-size: 1.1rem; }
  .perfil-main-actions .btn { font-size: .78rem; padding: .55rem .7rem; }

  /* Tabla general pequeña */
  table          { font-size: .78rem; }
  thead th,
  tbody td       { padding: .55rem .75rem; }
  .td-actions    { flex-wrap: wrap; gap: .2rem; }
  .btn-table     { padding: .24rem .55rem; font-size: .68rem; }
}

@media (min-width: 641px) {
  .pedido-cards  { display: none; }
  .cliente-cards { display: none; }
}