/* ═══════════════════════════════════════════════════════════
   EMMARIA · Diseño 2026 (panel lateral ciruela con ondas, logo con resplandor).
   Lo usan EMMARIA y todos los módulos (Taller, Ventas, Repuestos, Nómina). Solo presentación.
   ═══════════════════════════════════════════════════════════ */
:root {
  --panel-ancho: 272px;
  --panel-texto: #FFFFFF;
  --panel-suave: #F3BFDD;
  --panel-activo: linear-gradient(100deg, #F2459C 0%, #E0207F 60%, #E8479F 100%);
  --panel-ico-activo: linear-gradient(145deg, #FF8CC6, #F25AA8);
  --fondo-app: radial-gradient(circle at 100% 0%, #FDE3F1 0, rgba(253,227,241,0) 38%), radial-gradient(circle at 75% 100%, #DDF7F4 0, rgba(221,247,244,0) 42%), #F8F4F9;
}

/* ── el panel ── */
.emm-panel, html body .emm-panel.emm-panel {
  background: url(/img/panel/arriba.webp) top center / 100% auto no-repeat local,
              url(/img/panel/abajo.webp) bottom center / 100% auto no-repeat local,
              linear-gradient(180deg, #5B0E4C 0%, #510D47 40%, #4A0E44 100%) !important;
  color: var(--panel-texto) !important;
  border-right: 1px solid #E7A6CF !important;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent;
}
.emm-panel .panel-logo, .emm-panel .emm-logo {
  display: block !important; position: relative; height: 252px; flex-shrink: 0; padding: 0 !important; margin: 0 !important;
}
.emm-panel .panel-logo img, .emm-panel .emm-logo img {
  position: absolute; left: 50%; top: 46px; width: 196px !important; max-width: none !important; height: auto; transform: translateX(-50%);
}
.emm-panel .panel-arte, .emm-panel .emm-pie-arte {
  position: relative; flex-shrink: 0; height: 430px; margin-top: auto; pointer-events: none;
}
.emm-panel .panel-arte img, .emm-panel .emm-pie-arte img {
  position: absolute; left: 50%; bottom: 96px; width: 184px; transform: translateX(-50%);
}
.emm-panel .panel-arte span, .emm-panel .emm-pie-arte span {
  position: absolute; left: 0; right: 0; bottom: 44px; text-align: center; font: 600 12px/1.5 var(--fuente, 'Plus Jakarta Sans', sans-serif);
  letter-spacing: .2em; color: #4A0E44;
}

/* ── enlaces del menú (EMMARIA: a.nav · módulos: a.emm-nav) ── */
.emm-panel a.nav, .emm-panel a.emm-nav {
  display: flex !important; align-items: center; gap: 12px; min-height: 50px; padding: 5px 10px 5px 5px !important; border-radius: 14px !important;
  color: var(--panel-texto) !important; font: 500 15px/1.25 var(--fuente, 'Plus Jakarta Sans', sans-serif) !important; text-decoration: none;
  background: none; box-shadow: none; position: relative; transition: background .15s, transform .15s;
}
.emm-panel a.nav .nav-ico, .emm-panel a.emm-nav .nav-ico {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; color: #fff;
}
.emm-panel a.nav .ico, .emm-panel a.emm-nav .ico, .emm-panel a.emm-nav svg { color: #fff !important; width: 22px; height: 22px; }
.emm-panel a.nav:hover, .emm-panel a.emm-nav[href]:hover { background: rgba(255,255,255,.09) !important; }
.emm-panel a.nav.activo, .emm-panel a.emm-nav.emm-activo {
  background: var(--panel-activo) !important; font-weight: 700 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 20px rgba(224,32,127,.45) !important;
}
.emm-panel a.nav.activo .nav-ico, .emm-panel a.emm-nav.emm-activo .nav-ico {
  background: var(--panel-ico-activo); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 3px 8px rgba(120,0,60,.25);
}
.emm-panel a.nav .marca-roja { top: 6px; left: 36px; border-color: #5B0E4C; }

/* títulos de grupo y separadores */
.emm-panel .etiqueta, .emm-panel .emm-etq { color: var(--panel-suave) !important; opacity: .9; }
.emm-panel .grupo + .grupo, .emm-panel .emm-grupo.emm-abajo { border-top: 1px solid rgba(255,255,255,.14) !important; }

/* pie con el usuario (EMMARIA) */
.emm-panel .pie { margin-top: 18px !important; border-top: 1px solid rgba(255,255,255,.14) !important; padding: 14px 12px 0 !important; }
.emm-panel .pie .quien { color: var(--panel-suave) !important; }
.emm-panel .pie .quien b { color: #fff !important; }
.emm-panel .pie .btn-icono { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; }
.emm-panel .pie .btn-icono:hover { background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.4); }
.emm-panel .avatar { background: var(--panel-ico-activo); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.emm-panel .emm-version { color: var(--panel-suave) !important; opacity: .8; }

/* ── submenús propios de cada módulo, sobre el panel oscuro ── */
.emm-panel .emm-sub { border-left-color: rgba(255,255,255,.25) !important; }
/* Taller */
html.emm-marco body .emm-panel .nav-btn { color: #F8E6F1 !important; background: none !important; }
html.emm-marco body .emm-panel .nav-btn:hover { background: rgba(255,255,255,.09) !important; color: #fff !important; }
html.emm-marco body .emm-panel .nav-btn.active { background: rgba(255,255,255,.18) !important; color: #fff !important; }
html.emm-marco body .emm-panel .nav-btn svg { color: #F5C6E0 !important; }
html.emm-marco body .emm-panel .nav-btn.active svg { color: #fff !important; }
html.emm-marco body .emm-panel .nav-label { color: var(--panel-suave) !important; }
/* Ventas */
html.emm-marco body .emm-panel .cadisaVMenuItem { color: #F8E6F1 !important; }
html.emm-marco body .emm-panel .cadisaVMenuItem:hover { background: rgba(255,255,255,.09) !important; color: #fff !important; }
html.emm-marco body .emm-panel .cadisaVMenuItem.act { background: rgba(255,255,255,.18) !important; color: #fff !important; }
html.emm-marco body .emm-panel .cadisaVMenuIcon, html.emm-marco body .emm-panel .cadisaVMenuItem.act .cadisaVMenuIcon { color: #F5C6E0 !important; }
html.emm-marco body .emm-panel .cadisaVMenuSection { color: var(--panel-suave) !important; }
html.emm-marco body .emm-panel .cadisaVMenuDivider { background: rgba(255,255,255,.14) !important; }
html.emm-marco body .emm-panel .cadisaVMenuLogout, html.emm-marco body .emm-panel .cadisaVMenuLogout .cadisaVMenuIcon { color: #FFB4C8 !important; }
/* Repuestos */
html.emm-marco body .emm-panel .nav a { color: #F8E6F1 !important; }
html.emm-marco body .emm-panel .nav a:hover { background: rgba(255,255,255,.09) !important; }
html.emm-marco body .emm-panel .nav.emm-sub a.on { background: rgba(255,255,255,.18) !important; color: #fff !important; }
html.emm-marco body .emm-panel .nav .i, html.emm-marco body .emm-panel .nav.emm-sub a.on .i { color: #F5C6E0 !important; }
html.emm-marco body .emm-panel .navh { color: var(--panel-suave) !important; }
html.emm-marco body .emm-panel .navsep { background: rgba(255,255,255,.14) !important; }
/* Nómina */
html.emm-marco body .emm-panel .ni { color: #F8E6F1 !important; }
html.emm-marco body .emm-panel .ni:hover { background: rgba(255,255,255,.09) !important; }
html.emm-marco body .emm-panel .ni.on { background: rgba(255,255,255,.18) !important; color: #fff !important; }
html.emm-marco body .emm-panel .ni .ic, html.emm-marco body .emm-panel .ni.on .ic { color: #F5C6E0 !important; }
html.emm-marco body .emm-panel .ng, html.emm-marco body .emm-panel .sb-more { color: var(--panel-suave) !important; }

/* módulos: el panel ocupa toda la altura y deja el arte abajo */
html.emm-marco body .emm-panel { display: flex !important; flex-direction: column !important; padding: 0 0 0 !important; }
html.emm-marco body .emm-panel > * { flex-shrink: 0; }

/* ── fondo general suave (rosado / turquesa) ── */
html body, html.emm-marco.emm-marco body { background: var(--fondo-app) !important; background-attachment: fixed !important; }

/* ── EMMARIA (pantalla principal) ── */
.app { background: none !important; }
.lateral.emm-panel { padding: 0 !important; gap: 10px !important; }
.lateral.emm-panel .grupo { padding: 0 12px; }
.principal > .barra { background: rgba(255,255,255,.78) !important; border-bottom: 1px solid #F0DCEA !important; }
html.emm-marco body .main, html.emm-marco body .layout { background: transparent !important; }

/* ── Inicio: "Sistema Administrativo" con una columna por empresa ── */
.ini-cab { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ini-cab > div { flex: 1 1 320px; }
.ini-saludo { font-size: 13.5px; font-weight: 700; color: #C2187A; margin-bottom: 2px; }
.ini-cab h1 { font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: #15122A; }
.ini-cab p { margin: 4px 0 0; font-size: 17px; color: #5B5470; }
.btn.ini-agregar { background: linear-gradient(90deg, #2DD4BF, #0E9AA7); border: 0; color: #fff; border-radius: 14px; min-height: 48px; padding: 0 18px; box-shadow: 0 6px 16px rgba(14,154,167,.3); }
.btn.ini-agregar:hover { color: #fff; filter: brightness(.95); }
.ie-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; align-items: start; }
.ie-col { background: #fff; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; border: 2px solid var(--c1); box-shadow: 0 10px 26px rgba(80,20,70,.12); position: relative; }
.ie-col.proxima { opacity: .92; }
.ie-cab { display: flex; gap: 10px; align-items: flex-start; padding: 14px 14px 10px; min-height: 96px; }
.ie-logo { width: 44px; height: 44px; border-radius: 12px; object-fit: contain; background: #fff; flex-shrink: 0; mix-blend-mode: multiply; }
.ie-nom { min-width: 0; flex: 1; }
.ie-nom h2 { font-size: 16px; font-weight: 800; line-height: 1.15; text-transform: uppercase; letter-spacing: -.01em; color: #15122A; }
.ie-nom p { margin: 3px 0 0; font-size: 13px; color: #3E3550; }
.ie-marcas { display: flex; gap: 12px; align-items: center; margin-top: 7px; }
.ie-marcas img { height: 18px; width: auto; }
.ie-pronto { position: absolute; top: 106px; left: 10px; z-index: 2; background: var(--c3); color: var(--c2); font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 99px; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.ie-foto { height: 160px; position: relative; overflow: hidden; background: var(--c3); }
.ie-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ie-foto.vacia { background: repeating-linear-gradient(135deg, var(--c3) 0 12px, #fff 12px 24px); }
.ie-hueco { position: absolute; inset: 22px 14px; border: 2px dashed var(--c1); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--c2); font-size: 12.5px; font-weight: 700; background: rgba(255,255,255,.6); }
.ie-lista { padding: 12px 10px 14px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, var(--c3), #fff 70%); }
.ie-it { position: relative; display: flex; align-items: center; gap: 9px; padding: 6px; border-radius: 16px; background: rgba(255,255,255,.95);
  border: 1px solid color-mix(in srgb, var(--c1) 16%, transparent); box-shadow: inset 0 1px 0 #fff, 0 4px 12px -4px color-mix(in srgb, var(--c2) 30%, transparent);
  text-decoration: none; color: #1D1830; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; transition: transform .15s, box-shadow .15s; }
a.ie-it:hover { transform: translateX(3px); box-shadow: inset 0 1px 0 #fff, 0 10px 20px -6px color-mix(in srgb, var(--c2) 45%, transparent); color: #1D1830; }
.ie-ic { position: relative; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(145deg, var(--c1), var(--c2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 6px 12px -4px var(--c2); }
.ie-ic::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0)); }
.ie-ic svg { position: relative; z-index: 1; color: #fff; }
.ie-tx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ie-ch { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--c3); color: var(--c2); flex-shrink: 0; }
.ie-it.on { background: linear-gradient(100deg, var(--c1), var(--c2)); border-color: transparent; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 20px -6px var(--c2); }
a.ie-it.on:hover { color: #fff; }
.ie-it.on .ie-ic { background: rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.ie-it.on .ie-ch { background: rgba(255,255,255,.25); color: #fff; }
.ie-nada { margin: 4px 6px; font-size: 13px; color: #6B6478; }
@media (max-width: 640px) { .ini-cab h1 { font-size: 26px; } .ie-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── detalles de las pantallas de EMMARIA ── */
.enc-ico { position: relative; overflow: hidden; background: linear-gradient(145deg, color-mix(in srgb, var(--mc) 65%, #fff), var(--mc)) !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 16px -6px var(--mc) !important; }
.enc-ico::after { content: ""; position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, rgba(255,255,255,.35), transparent); }
.tarjeta { border-radius: 20px; }

/* ── Imágenes de cada empresa (botón de cámara y ventana) ── */
.ie-cam { position: absolute; top: 10px; right: 10px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgba(255,255,255,.94); color: #4A0E44; box-shadow: 0 3px 10px rgba(0,0,0,.22); cursor: pointer; }
.ie-cam:hover { background: #fff; color: #C2187A; transform: scale(1.06); }
.ie-logo-caja:empty { display: none; }
.ie-ventana { max-width: 720px; }
.ie-imgs { display: flex; flex-direction: column; gap: 12px; }
.ie-img { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid #F0DCEA; border-radius: 16px; background: #FFF9FC; flex-wrap: wrap; }
.ie-img-ver { width: 150px; height: 100px; border-radius: 12px; overflow: hidden; background: repeating-linear-gradient(135deg, #FDE7F1 0 10px, #fff 10px 20px);
  display: grid; place-items: center; text-align: center; font-size: 12px; color: #8A7F96; padding: 0; flex-shrink: 0; }
.ie-img-ver.ancho { width: 240px; height: 90px; }
.ie-img-ver img { width: 100%; height: 100%; object-fit: cover; }
.ie-img-ver span { padding: 8px; }
.ie-img-txt { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px; }
.ie-img-txt b { font-size: 15px; }
.ie-img-est { font-size: 13px; color: #6B6478; }
.ie-img-acc { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.ie-img-acc label.btn { cursor: pointer; }

/* ── Comisiones de motos ── */
.cm-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; }
.cm-mes { display: flex; align-items: center; gap: 12px; } .cm-mes b { font-size: 17px; min-width: 150px; text-align: center; }
.cm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.cm-kpi { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; border-left: 4px solid #C2187A; }
.cm-kpi span { font-size: 13px; color: #5B6478; font-weight: 600; } .cm-kpi b { font-size: 22px; } .cm-kpi small { font-size: 12px; color: #8A7F96; }
.cm-kpi.cm-k-ok { border-left-color: #15924A; } .cm-kpi.cm-k-cob { border-left-color: #E8710F; } .cm-kpi.cm-k-fac { border-left-color: #2563EB; }
.cm-tabla { min-width: 940px; } .cm-tabla td .cm-in + .cm-in { margin-top: 6px; } .cm-moto { font-weight: 600; margin-top: 6px; } .cm-pagl { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; min-height: 34px; } .cm-tabla td { vertical-align: top; }
.cm-sub { font-size: 12px; color: #8A7F96; margin-top: 2px; } .cm-sub2 { font-size: 12.5px; color: #3E3550; max-width: 170px; }
.cm-in { width: 100%; min-width: 96px; border: 1.5px solid #E4DCEA; border-radius: 9px; padding: 7px 8px; font: 500 13.5px var(--fuente); background: #fff; }
.cm-in:focus { outline: none; border-color: #C2187A; box-shadow: 0 0 0 3px #FCE7F2; } .cm-in:disabled { background: #F5F3F7; color: #aaa; }
.cm-pag { width: 20px; height: 20px; accent-color: #15924A; }
.cm-est { display: inline-block; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.cm-e-ok { background: #DCFCE7; color: #15803D; } .cm-e-cob { background: #FEEBDA; color: #B45309; } .cm-e-fac { background: #E2EBFE; color: #1D4ED8; } .cm-e-gris { background: #F1F3F7; color: #5B6478; }
.cm-acc { white-space: nowrap; } .cm-acc .btn { min-height: 36px; padding: 0 12px; } .cm-acc .btn-icono { width: 36px; margin-left: 4px; }
.cm-total td { font-weight: 800; background: #FCF6FA; }
.cm-filtros { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid #EEE8F2; }
.cm-filtros select { border: 1.5px solid #E4DCEA; border-radius: 9px; padding: 7px 10px; font: 600 13.5px var(--fuente); background: #fff; }
.cm-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 14px 0 6px; }
.cm-form .campo { margin: 0; }
@media (max-width: 560px) { .cm-form { grid-template-columns: 1fr; } }
.fz-modos button[data-v][aria-selected="true"] { color: var(--m-comisiones, #B45309); }
.cm-casos { min-width: 200px; } .cm-caso { display: grid; grid-template-columns: 78px auto; gap: 6px; white-space: nowrap; font-size: 12.5px; line-height: 1.45; } .cm-caso span { color: #8A7F96; white-space: nowrap; } .cm-caso span::after { content: ':'; } .cm-caso b { color: #2A2236; }
.cm-tabla { min-width: 1080px; }