:root{
  --ph-bg:#fff; --ph-fg:#0f172a; --ph-muted:#475569; --ph-border:#e5e7eb;
  --ph-shadow:0 18px 48px rgba(15,23,42,.16); --ph-radius:14px;
  --ph-primary:#2563eb; --ph-primary-hover:#1d4ed8;
  --ph-width: clamp(480px, 42vw, 600px);
  --ph-max-h: min(86vh, 540px);
  --ph-pad: 14px;
  --ph-img-h: 300px;
  
  --phc-bg: var(--ph-bg, #fff);
  --phc-fg: var(--ph-fg, #0f172a);
  --phc-muted: var(--ph-muted, #475569);
  --phc-border: var(--ph-border, #e5e7eb);
  --phc-shadow: var(--ph-shadow, 0 18px 48px rgba(15,23,42,.16));
  --phc-radius: var(--ph-radius, 14px);
  --phc-primary: var(--ph-primary, #2563eb);
  --phc-primary-hover: var(--ph-primary-hover, #1d4ed8);

  --phc-width: clamp(520px, 52vw, 720px);
  --phc-max-h: min(88vh, 640px);
  --phc-pad: 16px;
  --phc-gap: 14px;

  --phc-ghost: #f1f5f9;
  --phc-ghost-hover: #e2e8f0;
  --phc-error: #dc2626;
}


/* Evita conflictos con sharepoint*/
button {
    min-width: inherit !important;

}
.dootPopUp{
	display: flex;
    justify-content: center;
}

#popupHome-titleBadge{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:12px 12px;
	background:linear-gradient(180deg, rgba(0,0,0, .34), rgba(0,0,0,.55));
	color:#fff;
	pointer-events:none;
}
tbody tr td
#popupHome-title{
	margin:0;
	font-weight:700;
	font-size:14px;
	letter-spacing:.2px;
	text-align:center;
	max-width:96%;
	white-space:nowrap;
	text-overflow:ellipsis;
}
/* Overlay */
#popupHome-overlay{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(2,6,23,.58); z-index:9999;
}
#popupHome-overlay.is-open{ display:flex; animation:ph-fade .18s ease-out; }

/* Card */
#popupHome-modal{
  width:var(--ph-width); max-height:var(--ph-max-h); background:var(--ph-bg); color:var(--ph-fg);
  border-radius:var(--ph-radius); box-shadow:var(--ph-shadow); overflow:clip;
  transform:translateY(6px); opacity:0; animation:ph-pop .18s ease-out forwards;
  display:grid; grid-template-rows:auto 1fr;
}

/* Header */
#popupHome-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--ph-pad) calc(var(--ph-pad) + 2px);
  border-bottom:1px solid var(--ph-border);
  background:linear-gradient(180deg, rgba(2,6,23,.04), rgba(2,6,23,0));
}
#popupHome-title{ margin:0; font-weight:700; font-size:16px; letter-spacing:.2px; }
#popupHome-close{
  border:0; background:transparent; color:var(--ph-muted);
  width:36px; height:36px; border-radius:9px; font-size:20px; line-height:1; cursor:pointer;
}
#popupHome-close:hover{ background:#f1f5f9; }

/* Contenido apilado: media -> desc -> CTA */
#popupHome-content{
  display:grid; grid-template-rows:auto auto auto; gap:12px; padding:var(--ph-pad);
}

/* Media (slider/video) */
#popupHome-media{
  position:relative; background:#000; border-radius:10px; overflow:hidden; height:var(--ph-img-h);
}
#popupHome-media .ph-iframe-wrap{ position:relative; width:100%; height:100%; }
#popupHome-media iframe, #popupHome-media video{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}

/* Splide dentro de media */
#popupHome-media .splide,
#popupHome-media .splide__track,
#popupHome-media .splide__list,
#popupHome-media .splide__slide{ height:100%; }

/* Descripción */
#popupHome-desc{
  padding:2px 2px 0 2px; color:var(--ph-muted);
  font-size:14px; line-height:1.5; max-height:160px; overflow:auto;
}

/* CTA (debajo de la descripción, a la derecha) */
#popupHome-ctaRow{ display:flex; justify-content:flex-end; }
#popupHome-cta{
  border:0; border-radius:10px; padding:10px 12px; font-size:14px; font-weight:600;
  text-decoration:none; cursor:pointer; background:var(--ph-primary); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
}
#popupHome-cta:hover{ background:var(--ph-primary-hover); }

/* -------- PILL inferior con flechas + dots (nativos Splide) + contador -------- */
#popupHome-pagerOverlay{
  position:absolute; left:9% ; bottom:4px ; transform:translateX(-50%);
  display:flex; 
  align-items:center;
   gap:10px; 
   padding:20px 12px;
   z-index:5;
   width: 105px;
   justify-content: center;
}
#popupHome-pagerOverlay.is-single .splide__arrow{ display:none; }

/* Flechas nativas (ya reubicadas dentro del pill) */
#popupHome-pagerOverlay .splide__arrow{
  width:34px; height:34px; border-radius:999px;
  background:rgba(241,245,249,.95); border:1px solid rgba(15,23,42,.06);
  display:inline-flex; align-items:center; justify-content:center;
}
#popupHome-pagerOverlay .splide__arrow:hover{ background:#e2e8f0; }
#popupHome-pagerOverlay .splide__arrow svg{ width:14px; height:14px; fill:#0f172a; }

/* Contador 1/N */
#popupHome-counter{
  min-width:15px; text-align:center; font-size:13px; color:#475569;
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(15,23,42,.06);
  height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Dots nativos de Splide dentro del pill */
#popupHome-pagerOverlay .splide__pagination{
  position:static; display:inline-flex; align-items:center; gap:6px; margin:0; padding:0 2px;
}
#popupHome-pagerOverlay .splide__pagination li{ margin:0; }
#popupHome-pagerOverlay .splide__pagination__page{
  width:8px; height:8px; border-radius:999px; background:#cbd5e1; opacity:1;
  transition:transform .15s ease, background-color .15s ease;
}
#popupHome-pagerOverlay .splide__pagination__page.is-active{
  background:#2563eb; transform:scale(1.15);
}

/* Animaciones + bloqueo scroll */
@keyframes ph-fade{ from{opacity:0} to{opacity:1} }
@keyframes ph-pop{ to{opacity:1; transform:translateY(0)} }
html.ph-modal-open, body.ph-modal-open{ overflow:hidden; }




/* ===========================
   BOTÓN SETTINGS (principal)
   =========================== */
.setting-btn {
  width: 37px;
  height: 37px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: rgb(51, 102, 204); /* azul */
  border-radius: 10px;
  cursor: pointer;
  border: none !important;
  box-shadow: 0 0 0 2px rgb(212, 209, 255);
  transition: background-color 0.2s ease, transform 0.3s ease, opacity 0.3s ease;
  user-select: none;
}

.setting-btn--floating {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 50;
}

.setting-btn:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.6);
  outline-offset: 2px;
}
.setting-btn:hover {
  background-color: rgb(41, 92, 194);
}

.bar {
  width: 50%;
  height: 2px;
  background-color: rgb(229, 229, 229);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 2px;
}
.bar::before {
  content: "";
  width: 2px;
  height: 2px;
  background-color: rgb(59, 107, 202);
  position: absolute;
  border-radius: 50%;
  border: 2px solid white;
  transition: all 0.3s ease;
  box-shadow: 0 0 5px white;
}
.bar1::before {
  transform: translateX(-4px);
}
.bar2::before {
  transform: translateX(4px);
}

.setting-btn:hover .bar1::before {
  transform: translateX(4px);
}
.setting-btn:hover .bar2::before {
  transform: translateX(-4px);
}

.setting-btn.scale-out {
  transform: rotate(180deg) scale(0.8);
  opacity: 0;
}
.setting-btn.scale-in {
  transform: rotate(0deg) scale(1);
  opacity: 1;
}

.setting-btn img {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.setting-btn.is-open img {
  transform: rotate(90deg) scale(1.05);
}

.tw-absolute { position: absolute; }
.tw-top-3    { top: 0.75rem; }   /* 12px */
.tw-right-3  { right: 0.75rem; } /* 12px */
.tw-z-50     { z-index: 50; }



/* Estado abierto: en lugar de animar barras, las escondemos y mostramos el ícono cancel */
.setting-btn .cancel-icon { display: none; width: 20px; height: 20px; }
.setting-btn.is-open .bar { opacity: 0; }
.setting-btn.is-open .cancel-icon { display: block; margin-top: -22px }

/* Botones secundarios redondos con el mismo fondo que settings */
.ph-tool-btn {
  width: 37px;
  height: 37px;
  border: 0 !important;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ph-tool-btn img { width: 20px; height: 20px; }
.ph-tool-btn:hover { background-color: rgb(41, 92, 194); }

#popupHome-btnUpdate{
	background-color: black;
}
#popupHome-btnCreate{
	background-color: rgb(51, 102, 204);
}

#popupHome-toolsBox{
	display:none; position:absolute; top:60px; right:12px; flex-direction:column; gap:8px;
}

/* Botón "X" en overlay (fuera del modal) */
.ph-overlayClose{
  position: fixed;
  top: 18px;
  right: 22px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  background: rgba(0,0,0,.55);
  color: #fff;
  z-index: 10000;
}

/* Padding del contenido */
#popupHome-content{ padding: var(--ph-pad); }

/* Alto del media a tamaño del modal (ajusta si prefieres var(--ph-img-h)) */
#popupHome-media{
  height: calc(var(--ph-max-h) - (var(--ph-pad) * 2));
}

/* Fondo blur con la M I S M A imagen */
#popupHome-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  opacity: 1;
}
#popupHome-bgImg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover;
  filter: blur(16px) saturate(110%);
  transform: scale(1.06);
  opacity: .6;
}
#popupHome-media .splide {
    visibility: visible !important;
}
#popupHome-media .splide{ position:relative; z-index:1; }  /* slider encima del blur */
#popupHome-tools{ z-index: 5; }   /* controles encima */

/* Link ocupa todo el slide cuando hay URL */
.ph-slide-link{ display:block; width:100%; height:100%; }

/* Herramientas: posición y animaciones controladas por clase .is-open */
#popupHome-tools{
  position: absolute; top: 0; right: 0; pointer-events:auto;
}
#popupHome-toolsBox{
  position:absolute; top:60px; right:12px;
  display:flex; flex-direction:column; gap:8px;
  opacity:0; visibility:hidden; pointer-events:none;
  transform: translateY(-6px) scale(0.96);
  transform-origin: top right;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
#popupHome-btnCreate, #popupHome-btnUpdate{
  opacity: 0; transform: translateY(-4px) scale(0.98);
  transition: opacity .22s ease, transform .22s ease;
}
#popupHome-tools.is-open #popupHome-toolsBox{
  opacity:1; visibility:visible; pointer-events:auto;
  transform: translateY(0) scale(1);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}
#popupHome-tools.is-open #popupHome-btnCreate{
  opacity:1; transform:none; transition-delay: .00s;
}
#popupHome-tools.is-open #popupHome-btnUpdate{
  opacity:1; transform:none; transition-delay: .05s;
}

/* Asegura el alto de slides/iframes/videos */
#popupHome-media .splide,
#popupHome-media .splide__track,
#popupHome-media .splide__list,
#popupHome-media .splide__slide{ height:100%; }
#popupHome-media .splide__slide{
  display:flex; align-items:center; justify-content:center; margin: 0 auto; 
}
#popupHome-media .splide__slide img{
  width:100%; height:100%; object-fit:contain; 
}
#popupHome-media .ph-iframe-wrap{ position:relative; width:100%; height:100%; }
#popupHome-media iframe, #popupHome-media video{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}

/* Reubicación de flechas (ya tenías estilos) */

#popupHome-pagerOverlay.is-single .splide__arrow{ display:none; }



/* ===========================
   OVERLAY + MODAL
   =========================== */
.phc-overlay{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2,6,23,.58);
  z-index: 10050; /* por encima del popup base */
  animation: ph-fade .18s ease-out;
}

.phc-modal{
  width: var(--phc-width);
  max-height: var(--phc-max-h);
  background: var(--phc-bg);
  color: var(--phc-fg);
  border-radius: var(--phc-radius);
  box-shadow: var(--phc-shadow);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  transform: translateY(6px);
  opacity: 0;
  animation: ph-pop .18s ease-out forwards;
}

/* ===========================
   HEADER
   =========================== */
.phc-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--phc-pad) calc(var(--phc-pad) + 2px);
  border-bottom: 1px solid var(--phc-border);
  background: linear-gradient(180deg, rgba(2,6,23,.04), rgba(2,6,23,0));
}
.phc-title{
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .2px;
}
.phc-close{
  border: 0;
  background: transparent;
  color: var(--phc-muted);
  width: 36px;
  height: 36px;
  border-radius: 9px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.phc-close:hover{ background: var(--phc-ghost); }

/* ===========================
   BODY
   =========================== */
.phc-body{
  padding: var(--phc-pad);
  display: grid;
  gap: var(--phc-gap);
  overflow: auto;
}

.phc-row{ display: grid; gap: 6px; }
.phc-label{
  font-size: 13px;
  color: var(--phc-muted);
  font-weight: 600;
}

/* Inputs base */
.phc-input{
  height: 38px;
  border: 1px solid var(--phc-border);
  border-radius: 10px;
  background: #fff;
  color: var(--phc-fg);
  outline: none;
  padding: 15px;
}
.phc-input::placeholder{ color: #94a3b8; }
.phc-input:focus{
  border-color: var(--phc-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* Grid 2 columnas (Orden + Publicado) */
.phc-grid2{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--phc-gap);
}

/* Check */
.phc-checkWrap{
  display: flex;
  align-items: center;
  gap: 10px;
}
.phc-check{
  width: 18px;
  height: 18px;
  accent-color: var(--phc-primary);
  cursor: pointer;
}
.phc-checkLabel{
  font-size: 14px;
  color: var(--phc-fg);
  cursor: pointer;
}

/* Segmented (Imagen / Video) */
.phc-segmented{
  display: inline-flex;
  gap: 6px;
  background: var(--phc-ghost);
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--phc-border);
}
.phc-segment{
  border: 0;
  background: transparent;
  color: var(--phc-fg);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
}
.phc-segment:hover{ background: var(--phc-ghost-hover); }
.phc-segment.is-active{
  background: var(--phc-primary);
  color: #fff;
}

/* File input + hint */
.phc-fileWrap{ display: grid; gap: 8px; }
.phc-file{
  border: 1px solid var(--phc-border);
  border-radius: 10px;
  background: #fff;
  padding: 5px 6px !important;
  cursor: pointer;
}
.phc-file::-webkit-file-upload-button{
  border: 0;
  background: var(--phc-primary);
  color: #fff;
  padding: 8px 12px;
  margin-right: 8px;
  border-radius: 8px;
  cursor: pointer;
}
.phc-file::file-selector-button{
  border: 0;
  background: var(--phc-primary);
  color: #fff;
  padding: 8px 12px;
  margin-right: 8px;
  border-radius: 8px;
  cursor: pointer;
}
.phc-fileHint{
  font-size: 12px;
  color: var(--phc-muted);
}

/* Preview */
.phc-preview{
  display: none;
  border: 1px dashed var(--phc-border);
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  max-height: 240px;
  overflow: hidden;
}
.phc-preview[aria-hidden="false"]{ display: block; }
.phc-preview img{
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}

/* Ayuda / textos pequeños */
.phc-help{
  font-size: 12px;
  color: var(--phc-muted);
}

/* Error */
.phc-error{
  min-height: 18px;
  color: var(--phc-error);
  font-size: 13px;
  font-weight: 600;
}

/* ===========================
   FOOTER / ACCIONES
   =========================== */
.phc-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: var(--phc-pad);
  border-top: 1px solid var(--phc-border);
  background: #fff;
}

.phc-btn{
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.phc-btn--ghost{
  background: var(--phc-ghost);
  color: var(--phc-fg);
}
.phc-btn--ghost:hover{ background: var(--phc-ghost-hover); }

.phc-btn--primary{
  background: var(--phc-primary);
  color: #fff;
}
.phc-btn--primary:hover{ background: var(--phc-primary-hover); }

.phc-btn.is-busy{ opacity: .8; pointer-events: none; }
.phc-spinner{
  width: 16px; height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.55);
  border-top-color: #fff;
  display: none;
  animation: phc-spin .8s linear infinite;
}
.phc-btn.is-busy .phc-spinner{ display: inline-block; }

@keyframes phc-spin{
  to{ transform: rotate(360deg); }
}

/* ===========================
   UTILS
   =========================== */
.is-hidden{ display: none !important; }

/* ===========================
   FONDO BLUR DEL POPUP PRINCIPAL (ya lo tienes, pero por si te sirve)
   #popupHome-bg y #popupHome-bgImg están fuera de este modal
   =========================== */

#popupHome-bgImg{
  width: 120%;
  height: 120%;
  object-fit: cover;
  opacity: .9;
}
#popupHome-media.has-bg::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.18));
  pointer-events: none;
}

/* ===========================
   RESPONSIVE FINO
   =========================== */
@media (max-width: 640px){
  .phc-modal{ width: min(96vw, 560px); }
  .phc-grid2{ grid-template-columns: 1fr; }
}


/* ==========================
   FILA COMPACTA
   ========================== */
.phc-row-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--phc-gap, 14px);
  margin-bottom: var(--phc-gap, 14px);
}

.phc-col-switch {
  flex: 1;
}
.phc-col-order {
  flex-shrink: 0;
}
.phc-col-pub {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* ==========================
   SWITCH Imagen / Video
   ========================== */
/* ===== SWITCH MODERNO Imagen/Video ===== */
.phc-switch {
  position: relative;
  display: inline-block;
  user-select: none;
}

.phc-switch input {
  display: none;
}

.phc-switch-track {
  position: relative;
  width: 180px;
  height: 44px;
  border-radius: 22px;
  background: var(--phc-ghost, #f1f5f9);
  box-shadow: inset 2px 2px 6px rgba(0,0,0,.08),
              inset -2px -2px 6px rgba(255,255,255,.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.phc-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 103px;
  height: 38px;
  border-radius: 19px;
  background: var(--phc-primary, #2563eb);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: transform 0.3s ease, background 0.3s ease;
  z-index: 1;
}

.phc-switch-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--phc-muted, #475569);
  z-index: 2;
  transition: color 0.25s ease;
}
.phc-switch-label--left {
  margin-left: 4px;
}
.phc-switch-label--right {
  margin-right: 4px;
}

/* Estado: activo (Video) */
.phc-switch input:checked + .phc-switch-track .phc-switch-thumb {
  transform: translateX(68px);
  background: var(--phc-primary-hover, #1d4ed8);
}
.phc-switch input:not(:checked) + .phc-switch-track .phc-switch-label--left {
  color: var(--phc-primary, #2563eb);
}
.phc-switch input:checked + .phc-switch-track .phc-switch-label--right {
  color: var(--phc-primary, #2563eb);
}

/* ==========================
   INPUT Orden XS
   ========================== */
.phc-input--xs {
  width: 50px;
  text-align: center;
  padding: 6px;
  font-size: 14px;
  font-weight: 600;
}

/* ==========================
   CHECKBOX Publicado Inline
   ========================== */
.phc-checkInline {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--phc-fg);
}
.phc-checkInline input {
  accent-color: var(--phc-primary);
  width: 16px;
  height: 16px;
}
input[type=password], input[type=text], input[type=file], select, textarea, .sp-peoplepicker-topLevel, .sp-peoplepicker-topLevelDisabled, .sp-peoplepicker-autoFillContainer, .ms-inputBox{
	background-color:transparent !important;
	color:black;
	
}
input[type=button], input[type=reset], input[type=submit], button{
	margin-left:0 !important
}

/* Cuadro visual para el orden */
.phc-order-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--phc-fg, #0f172a);
  background: var(--phc-ghost, #f1f5f9);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.1), inset -2px -2px 6px rgba(255,255,255,.9);
  user-select: none;
}


/* =======================================================
   READ MODAL + TABLA (para features/read/view.js)
   ======================================================= */

/* ---- Overlay / Modal ---- */
.phr-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2,6,23,.58);
  z-index: 10060;
  animation: phr-fade .18s ease-out;
}
.phr-modal {
  width: clamp(820px, 56vw, 860px);
  max-height: min(88vh, 720px);
  background: #fff;
  color: #0f172a;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(15,23,42,.16);
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  transform: translateY(6px);
  opacity: 0;
  animation: phr-pop .18s ease-out forwards;
}
@keyframes phr-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes phr-pop { to { opacity: 1; transform: translateY(0) } }

/* ---- Body / Footer ---- */
.phr-body {
  padding: 16px;
  display: grid;
  gap: 12px;
}
.phr-footer {
  border-top: 1px solid #e5e7eb;
  background: #fff;
  padding: 14px 16px;
}
.phr-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ---- Botones ---- */
.phr-btn {
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.phr-btn--ghost {
  background: #f1f5f9;
  color: #0f172a;
}
.phr-btn--ghost:hover { background: #e2e8f0; }

/* ---- Mensajes ---- */
.phr-error {
  min-height: 18px;
  color: #dc2626;
  font-size: 13px;
  font-weight: 600;
}
.phr-empty {
  padding: 24px;
  text-align: center;
  color: #64748b;
  font-size: 14px;
}

/* ---- Tabla contenedor ---- */

/* ---- Tabla ---- */
.phr-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e0e0e0;
  border-radius: 10px;

  background: #fff;
}
.compact-table {
  max-width: 815px;
  margin-inline: auto;
}
.colorEmptyState{ color: #85a6c0 !important; }
.phr-table thead th, .phr-th {
  background: #f8f9fa;
  border-right: 1px solid #e0e0e0;
  padding: 12px 8px;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  color: #333;
}
.phr-table thead th:last-child { border-right: none; }

.phr-table tbody td, .phr-td {
  border-right: 1px solid #e0e0e0;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
  overflow: inherit;
}
.phr-table tbody td:last-child { border-right: none; }

.phr-table tbody tr:hover { background-color: #f8f9fa; }

/* ---- Anchos de columnas ---- */
.th-preview { width: 96px; }
.th-type    { width: 160px; }
.th-order   { width: 110px; }
.th-pub     { width: 120px; }
.th-actions { width: 120px; }

/* ---- Preview ---- */
.phr-preview {
  width: 80px;
  height: 40px;
  border-radius: 4px;
  display: block;
  margin: 0 auto;
}
.phr-preview.is-empty {
  width: 40px;
  height: 30px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: #f5f5f5;
  border: 1px dashed #ccc;
  color: #999;
  font-size: 12px;
}

/* ---- Badge tipo (Imagen/Video/NA) ---- */
.phr-typeBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  margin: 0 auto;
}
.phr-typeBadge__icon { display: inline-block; }
.phr-typeBadge__label { display: inline-block; }

.phr-typeBadge--image { background: #e3f2fd; color: #1976d2; }
.phr-typeBadge--video { background: #fce4ec; color: #c2185b; }
.phr-typeBadge--na    { background: #f5f5f5; color: #757575; }

/* ---- Badge publicado (Sí/No) ---- */
.phr-badge {
  display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
 }
.phr-pubYes { 
	background: #e6f6ed;
    color: #16a34a;
    border: 1px solid #bbf7d0;
     }
.phr-pubNo  { background: #ffebee; color: #d32f2f; }

/* ---- Acciones (tres puntitos) ---- */
.td-actions { position: relative; }

.phr-rowMenuBtn {
  border: 0;
    background: var(--phc-ghost, #f1f5f9);
    border: 1px solid var(--phc-border, #e5e7eb);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.phr-rowMenuBtn:hover {
  background: #e9ecef;
  transform: scale(1.05);
}
.phr-menuBtn__icon { color: #666; }

/* Menú */
.phr-rowMenuList {
  position: absolute;
    margin-top: 6px;
    right: 0;
    min-width: 140px;
    background: #fff;
    border: 1px solid var(--phc-border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 14px 30px rgba(2, 6, 23, .1);
    padding: 6px;
    display: none;
    z-index: 9;
      transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease;
  overflow: hidden;
}
.phr-rowMenuList.is-open {
  display: grid;
  opacity: 1;
  transform: translateY(0);
  gap:5px
}

.phr-rowMenuItem {
  display: flex;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--phc-fg, #0f172a);
    text-decoration: none;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    background: white;
    }

.phr-rowMenuItem:hover { background: #f8f9fa; }

.phr-menuItem__icon { color: #555; }
.phr-menuItem__icon--edit   { color: #2196f3; }
.phr-menuItem__icon--delete { color: #d32f2f; }

/* ---- Cuadro de orden (reutiliza el de create si ya existe) ---- */
.phc-order-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  background: #f1f5f9;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.08), inset -2px -2px 6px rgba(255,255,255,.9);
  user-select: none;
}

/* ---- Responsive ---- */
@media (max-width: 720px) {
  .phr-modal { width: min(96vw, 720px); }
  .th-type    { width: 140px; }
  .th-actions { width: 96px; }
}



/* =======================================================
   UPDATE (editar 1 ítem) – estilos de features/update/*
   ======================================================= */

/* ---- Overlay / Modal ---- */
.phu2-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2,6,23,.58);
  z-index: 10070;
  animation: phu2-fade .18s ease-out;
}
.phu2-modal {
  width: clamp(640px, 46vw, 680px);
  max-height: min(78vh, 520px);
  background: #fff;
  color: #0f172a;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(15,23,42,.16);
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  transform: translateY(6px);
  opacity: 0;
  animation: phu2-pop .18s ease-out forwards;
}
@keyframes phu2-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes phu2-pop  { to   { opacity: 1; transform: translateY(0) } }

/* ---- Body / Footer ---- */
.phu2-body {
  padding: 16px;
  display: grid;
  gap: 12px;
  overflow: auto;
}
.phu2-footer {
  border-top: 1px solid #e5e7eb;
  background: #fff;
  padding: 12px 16px;
}
.phu2-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ---- Botones ---- */
.phu2-btn {
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.phu2-btn--ghost {
  background: #f1f5f9;
  color: #0f172a;
}
.phu2-btn--ghost:hover { background: #e2e8f0; }
.phu2-btn--primary {
  background: #2563eb;
  color: #fff;
}
.phu2-btn--primary:hover { background: #1d4ed8; }

/* ---- Mensajes ---- */
.phu2-error {
  min-height: 18px;
  color: #dc2626;
  font-size: 13px;
  font-weight: 600;
}

/* ---- Tabla (una sola fila) ---- */
.phu2-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.phu2-table thead th,
.phu2-th {
  background: #f8f9fa;
  border-right: 1px solid #e0e0e0;
  padding: 10px 8px;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  color: #333;
}
.phu2-table thead th:last-child { border-right: none; }
.phu2-table tbody td,
.phu2-td {
  border-right: 1px solid #e0e0e0;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
}
.phu2-table tbody td:last-child { border-right: none; }

/* ---- Anchos ---- */
.th-preview { width: 96px; }
.th-type    { width: 120px; }
.th-media   { width: auto; }
.th-order   { width: 120px; }
.th-pub     { width: 140px; }

/* ---- Preview ---- */
.phu2-preview {
  width: 52px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
}
.phu2-preview.is-empty {
  width: 52px;
  height: 40px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: #f5f5f5;
  border: 1px dashed #ccc;
  color: #999;
  font-size: 12px;
}

/* ---- Badge tipo ---- */
.phu2-typeBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  margin: 0 auto;
}
.phu2-typeBadge__icon { display: inline-block; }
.phu2-typeBadge__label { display: inline-block; }

.phu2-typeBadge--image { background: #e3f2fd; color: #1976d2; }
.phu2-typeBadge--video { background: #fce4ec; color: #c2185b; }
.phu2-typeBadge--na    { background: #f5f5f5; color: #757575; }

/* ---- Controles ---- */
.phu2-input {
  height: 38px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  padding: 0 10px;
  width: 100%;
  outline: none;
}
.phu2-input::placeholder { color: #94a3b8; }
.phu2-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.phu2-input[readonly] {
  background: #f8fafc;
  color: #334155;
}
.phu2-input--xs {
  width: 72px;
  text-align: center;
  padding: 0 6px;
  font-weight: 700;
}

.phu2-select {
  height: 38px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  padding: 0 10px;
  outline: none;
}
.phu2-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* Orden box (si quisieras usar un span visual) */
.phu2-orderBox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  background: #f1f5f9;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.08), inset -2px -2px 6px rgba(255,255,255,.9);
  user-select: none;
}

/* ---- Util ---- */
.phu2-muted { color: #64748b; font-size: 13px; }


/* Overlay de carga para la tabla READ */
.phr-tableWrap {
  position: relative;
}

.phr-loading__overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255,255,255,.65);
  z-index: 5;
}

.phr-loading__spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid #cbd5e1;
  border-top-color: #0ea5e9;
  animation: phr-spin .9s linear infinite;
}

.phr-loading__label {
  font-size: 14px;
  color: #334155;
  font-weight: 600;
}

.phr-tableWrap.phr-loading .phr-loading__overlay {
  display: flex;
}

@keyframes phr-spin {
  to { transform: rotate(360deg); }
}


/* DELETE modal base — ajusta a tu sistema de diseño */
.phd-overlay {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: rgba(2,6,23,.58); z-index: 10060;
  animation: phd-fade .18s ease-out;
}
.phd-modal {
  width: min(480px, 92vw); background: #fff; color: #0f172a;
  border-radius: 14px; box-shadow: 0 18px 48px rgba(15,23,42,.16);
  overflow: hidden; transform: translateY(6px); opacity: 0;
  animation: phd-pop .18s ease-out forwards;
}
@keyframes phd-fade { from{opacity:0} to{opacity:1} }
@keyframes phd-pop { to{opacity:1; transform: translateY(0)} }

.phd-body { padding: 20px 20px 4px; }
.phd-footer { padding: 14px 20px 20px; border-top: 1px solid #e5e7eb; background: #fff; }
.phd-actions { display: flex; justify-content: flex-end; gap: 10px; }

.phd-alert { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.phd-alert__icon { color: #e11d48; margin-top: 2px; }
.phd-alert__title { font-size: 16px; font-weight: 800; margin: 0; }
.phd-alert__msg { font-size: 14px; color: #334155; margin: 4px 0 0; }

.phd-error { min-height: 18px; color: #dc2626; font-size: 13px; font-weight: 600; margin-top: 10px; }

.phd-btn { border: 0; border-radius: 10px; padding: 10px 14px; font-size: 14px; font-weight: 700; cursor: pointer; }
.phd-btn--ghost { background: #f1f5f9; color: #0f172a; }
.phd-btn--ghost:hover { background: #e2e8f0; }
.phd-btn--danger { background: #ef4444; color: #fff; }
.phd-btn--danger:hover { background: #dc2626; }

/* Oculta herramientas por defecto */
#popupHome-tools {
  display: none !important;
}

/* Mostrar herramientas si el usuario es admin */
.ph-isAdmin #popupHome-tools {
  display: block !important;
}