/* Estilos de los formularios de la trastienda (Admin), antes incrustados como <style> en cada
   .aspx. Un bloque por página, en el mismo orden en que se han ido migrando. Las reglas de clases
   que colisionaban entre páginas con contenido distinto van bajo una clase de ámbito propia de esa
   página (p.ej. ".pg-categoria-crud .tab-btn") para no romper otras páginas que usan el mismo
   nombre de clase con otro estilo. */

/* ===== Productos.aspx ===== */
.prod-thumb { width: 45px; height: 45px; object-fit: cover; border-radius: 6px; border: 1px solid #eee; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.prod-thumb-empty { width: 45px; height: 45px; background: #f8f9fa; border-radius: 6px; border: 1px dashed #ccc; display:flex; align-items:center; justify-content:center; color:#aaa; font-size: 1.2rem; }

/* ===== Categorias.aspx ===== */
/* ESTILOS PARA CATEGORÍAS DE BAJA */
.row-baja { background-color: #fdfdfd; }
.row-baja td { opacity: 0.6; font-style: italic; }
.row-baja td.cat-nombre { text-decoration: line-through; color: #999; }
.row-baja td:last-child, .row-baja td:first-child { opacity: 1; text-decoration: none; }

.badge-baja { background: #d9534f; color: white; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; display: inline-block; }
.badge-activo { background: var(--primary); color: white; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; display: inline-block; }

/* BOTONES DE ORDENACIÓN COLOREADOS */
.btn-subir { background: #e8f5e9; color: #28a745; border: 1px solid #28a745; border-radius: 4px; padding: 6px 10px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
.btn-subir:hover:not(:disabled) { background: #28a745; color: white; }

.btn-bajar { background: #fff3cd; color: #f57c00; border: 1px solid #f57c00; border-radius: 4px; padding: 6px 10px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
.btn-bajar:hover:not(:disabled) { background: #f57c00; color: white; }

.btn-subir:disabled, .btn-bajar:disabled { opacity: 0.4; cursor: not-allowed; border-color: #ccc; color: #999; background: #f9f9f9; }

/* ===== MediosDePago.aspx =====
   .row-principal/.badge-principal aquí coinciden con Empresas.aspx (mismo contenido), pero
   .row-baja/.badge-baja NO coinciden con los de Categorias.aspx, así que se escopa toda la
   sección con .pg-medios-pago para evitar cualquier choque de nombres. */
.pg-medios-pago .row-principal { background-color: #fbfbf9; border-left: 4px solid var(--primary); }
.pg-medios-pago .badge-principal { background: var(--primary); color: white; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; margin-left: 10px; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

.pg-medios-pago .row-baja { background-color: #fff5f5; color: #d9534f; font-style: italic; }
.pg-medios-pago .row-baja td { text-decoration: line-through; opacity: 0.7; }
.pg-medios-pago .row-baja td:last-child { text-decoration: none; opacity: 1; } /* Los botones no se tachan */
.pg-medios-pago .badge-baja { background: #d9534f; color: white; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; margin-left: 10px; display: inline-flex; align-items: center; gap: 4px; text-decoration: none !important; font-style: normal; }

/* ===== Empresas.aspx ===== */
.row-principal { background-color: #fbfbf9; border-left: 4px solid var(--primary); }
.badge-principal { background: var(--primary); color: white; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; margin-left: 10px; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

/* ===== PaginaCRUD.aspx =====
   .page-edit-tab (singular) es idéntico al de CmsPortada.aspx, se deja tal cual. Solo
   .page-edit-tabs (plural, el contenedor) difiere entre las dos páginas (aquí va centrado con
   max-width, en CmsPortada.aspx va a ancho completo), así que CmsPortada.aspx escopa su propia
   versión más abajo. */
.page-edit-tabs { display: flex; gap: 10px; border-bottom: 2px solid #eee; margin-bottom: 25px; max-width: 800px; margin-left: auto; margin-right: auto; }
.page-edit-tab { padding: 12px 25px; font-size: 1rem; font-weight: 600; color: #888; text-decoration: none; border-bottom: 3px solid transparent; display: flex; align-items: center; gap: 8px; }
.page-edit-tab:hover { color: var(--primary); }
.page-edit-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.page-edit-tab.disabled { color: #ccc; cursor: not-allowed; }

/* ===== CmsPortada.aspx =====
   .row-baja aquí NO coincide con el de Categorias.aspx (distinto color de fondo), y
   .page-edit-tabs (el contenedor, plural) tampoco coincide con el de PaginaCRUD.aspx (aquí va a
   ancho completo, allí centrado) — se escopa toda la sección con .pg-cms-portada para evitar
   cualquier choque. El resto de clases (badge-baja/activo, btn-subir/bajar, page-edit-tab en
   singular) sí coinciden con las de otras páginas, pero se escopan igualmente por consistencia. */
.pg-cms-portada .row-baja { background-color: #fff5f5; color: #d9534f; }
.pg-cms-portada .row-baja td { opacity: 0.6; }
.pg-cms-portada .row-baja td:last-child, .pg-cms-portada .row-baja td:first-child { opacity: 1; }
.pg-cms-portada .badge-baja { background: #d9534f; color: white; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; display: inline-block; }
.pg-cms-portada .badge-activo { background: var(--primary); color: white; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; display: inline-block; }
.pg-cms-portada .btn-subir { background: #e8f5e9; color: #28a745; border: 1px solid #28a745; border-radius: 4px; padding: 6px 10px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
.pg-cms-portada .btn-subir:hover:not(:disabled) { background: #28a745; color: white; }
.pg-cms-portada .btn-bajar { background: #fff3cd; color: #f57c00; border: 1px solid #f57c00; border-radius: 4px; padding: 6px 10px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
.pg-cms-portada .btn-bajar:hover:not(:disabled) { background: #f57c00; color: white; }
.pg-cms-portada .btn-subir:disabled, .pg-cms-portada .btn-bajar:disabled { opacity: 0.4; cursor: not-allowed; border-color: #ccc; color: #999; background: #f9f9f9; }
.pg-cms-portada .btn-eliminar { color: #d9534f; transition: 0.2s; }
.pg-cms-portada .btn-eliminar:hover { background-color: #d9534f !important; color: white !important; border-color: #d9534f !important; }
.pg-cms-portada .page-edit-tabs { display: flex; gap: 10px; border-bottom: 2px solid #eee; margin-bottom: 25px; }
.pg-cms-portada .page-edit-tab { padding: 12px 25px; font-size: 1rem; font-weight: 600; color: #888; text-decoration: none; border-bottom: 3px solid transparent; display: flex; align-items: center; gap: 8px; }
.pg-cms-portada .page-edit-tab:hover { color: var(--primary); }
.pg-cms-portada .page-edit-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ===== ComentariosBlog.aspx =====
   .portfolio-grid aquí es una TABLA de comentarios; PersonaCRUD.aspx usa el mismo nombre para una
   REJILLA de tarjetas de portfolio — hay que comprobar/escopar cuando se migre esa página (Lote 3). */
.portfolio-grid { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 0.9rem; }
.portfolio-grid th { padding: 12px 15px; background: #f8fafc; font-weight: 600; text-align: left; color: #475569; border-bottom: 2px solid #e2e8f0; }

/* Redondeado de esquinas nativo mediante selectores CSS puros */
.portfolio-grid th:first-child { border-radius: 6px 0 0 0; }
.portfolio-grid th:last-child { border-radius: 0 6px 0 0; }

.portfolio-grid td { padding: 12px 15px; border-bottom: 1px solid #e2e8f0; color: #334155; vertical-align: middle; }
.portfolio-grid tr:hover { background: #f8fafc; }

/* Badges estilizados */
.status-badge { padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; display: inline-block; }
.status-badge.approved { background: #e8f5e9; color: #2e7d32; }
.status-badge.pending { background: #fff3e0; color: #e65100; }

/* Botonera de acciones */
.action-btn-status { width: 32px; height: 32px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 1.1rem; margin: 0 4px; transition: 0.2s; border: 1px solid transparent; }
.action-btn-status.ok { background: #edf7ed; color: #2e7d32; }
.action-btn-status.ok:hover { background: #2e7d32; color: #fff; }
.action-btn-status.warn { background: #fff3e0; color: #e65100; }
.action-btn-status.warn:hover { background: #e65100; color: #fff; }
.action-btn-status.del { background: #fdeede; color: #c62828; }
.action-btn-status.del:hover { background: #c62828; color: #fff; }

.portfolio-grid .text-center { text-align: center !important; }

/* ===== CategoriaCRUD.aspx =====
   .slider/.tab-btn/.tab-content/.seo-counter/.img-preview-box tienen variantes distintas en otras
   páginas (ProductoCRUD, ConfigPanel, CmsProductoConfig, PersonaCRUD, CmsPortadaCRUD...), así que
   se escopa TODO el bloque bajo .pg-categoria-crud, aunque algunas reglas (admin-header-panel,
   toggle-*, simple-file-upload) sean idénticas en otras páginas — no hace daño repetirlas aquí. */
.pg-categoria-crud .admin-header-panel { background: #fff; border-radius: 8px; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 30px; border: 1px solid #eee; }
.pg-categoria-crud .toggle-container { display: flex; align-items: center; gap: 15px; }
.pg-categoria-crud .toggle-label { font-weight: 600; color: #555; font-size: 0.95rem; }
.pg-categoria-crud .toggle-switch { position: relative; display: inline-block; width: 54px; height: 30px; }
.pg-categoria-crud .toggle-switch input { opacity: 0; width: 0; height: 0; }
.pg-categoria-crud .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #d9534f; transition: .4s; border-radius: 34px; }
.pg-categoria-crud .slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.pg-categoria-crud input:checked + .slider { background-color: #28a745; }
.pg-categoria-crud input:checked + .slider:before { transform: translateX(24px); }

.pg-categoria-crud .admin-tabs { display: flex; border-bottom: 2px solid #eee; margin-bottom: 25px; gap: 20px; }
.pg-categoria-crud .tab-btn { background: none; border: none; padding: 10px 5px; font-size: 1rem; font-weight: 600; color: var(--text-light); cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.3s ease; }
.pg-categoria-crud .tab-btn:hover { color: var(--text-dark); }
.pg-categoria-crud .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.pg-categoria-crud .tab-content { display: none; animation: catCrudFadeIn 0.4s; }
.pg-categoria-crud .tab-content.active { display: block; }
@keyframes catCrudFadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.pg-categoria-crud .seo-counter { font-size: 0.8rem; color: var(--text-light); float: right; margin-top: 5px; }
.pg-categoria-crud .seo-counter.warning { color: #f0ad4e; font-weight: bold; }
.pg-categoria-crud .seo-counter.danger { color: #d9534f; font-weight: bold; }

.pg-categoria-crud .img-preview-box { width: 100%; min-height: 150px; background: #f9f9f9; border: 2px dashed #ddd; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; overflow: hidden; padding: 10px; }
.pg-categoria-crud .img-preview-box img { max-width: 100%; max-height: 250px; object-fit: contain; border-radius: 4px; }
.pg-categoria-crud .simple-file-upload { display: block; width: 100%; padding: 10px; background: #fff; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; }

/* ===== CmsProductoConfig.aspx =====
   .tab-btn tiene su propia variante (distinta de CategoriaCRUD/ConfigPanel/ProductoCRUD/PersonaCRUD),
   así que se escopa bajo .pg-cms-producto-config junto con el resto de clases de la página
   (aunque .cms-config-*/.complex-fields-grid/.small-input sean únicas de aquí, se dejan igual). */
.pg-cms-producto-config .tab-btn { appearance: none; -webkit-appearance: none; background: none; border: none; padding: 12px 15px; font-size: 0.95rem; font-weight: 600; color: #64748b; cursor: pointer; border-bottom: 3px solid transparent; transition: 0.2s; display: flex; align-items: center; gap: 8px; }
.pg-cms-producto-config .tab-btn:hover { color: var(--primary); }
.pg-cms-producto-config .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.pg-cms-producto-config .tab-content { display: none; }
.pg-cms-producto-config .tab-content.active { display: block; }

.pg-cms-producto-config .cms-config-section-container { background: #f8fafc; padding: 25px; border-radius: 8px; border: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 16px; margin-top: 15px; }
.pg-cms-producto-config .cms-config-section-container h5 { margin: 0 0 5px 0; font-size: 1rem; color: #334155; font-weight: 700; border-bottom: 1px dashed #cbd5e1; padding-bottom: 10px; }
.pg-cms-producto-config .cms-config-row { display: grid; grid-template-columns: 320px 1fr; align-items: center; gap: 20px; background: #ffffff; padding: 10px 15px; border-radius: 6px; border: 1px solid #e2e8f0; }
.pg-cms-producto-config .cms-config-row.complex-row { grid-template-columns: 320px 1fr; align-items: start; padding: 15px; }
.pg-cms-producto-config .complex-fields-grid { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
@media(min-width: 600px) { .pg-cms-producto-config .complex-fields-grid { grid-template-columns: 2fr 1fr 1fr; } }
.pg-cms-producto-config .cms-config-row label { margin: 0; }
.pg-cms-producto-config .small-input { padding: 8px 12px; font-size: 0.9rem; height: auto !important; }

/* ===== MedioDePagoCRUD.aspx =====
   .slider aquí es gris por defecto (igual que ArticuloBlogCRUD.aspx) pero con reglas adicionales
   (input:checked, .chk-danger, :disabled) que no existen en las otras páginas — se escopa todo el
   bloque bajo .pg-mediodepago-crud para no arriesgar con ninguna de esas combinaciones. */
.pg-mediodepago-crud .admin-header-panel { background: #fff; border-radius: 8px; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 30px; border: 1px solid #eee; }
.pg-mediodepago-crud .admin-header-title { font-size: 1.5rem; margin: 0; color: #333; font-weight: 600; }

.pg-mediodepago-crud .toggle-container { display: flex; align-items: center; gap: 15px; }
.pg-mediodepago-crud .toggle-label { font-weight: 600; color: #555; font-size: 0.95rem; }

.pg-mediodepago-crud .toggle-switch { position: relative; display: inline-block; width: 54px; height: 30px; }
.pg-mediodepago-crud .toggle-switch input { opacity: 0; width: 0; height: 0; }
.pg-mediodepago-crud .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.pg-mediodepago-crud .slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }

.pg-mediodepago-crud input:checked + .slider { background-color: #6B705C; }
.pg-mediodepago-crud input:checked + .slider:before { transform: translateX(24px); }

/* Modificador para el slider de baja */
.pg-mediodepago-crud input.chk-danger:checked + .slider { background-color: #28a745; }
.pg-mediodepago-crud input.chk-danger:not(:checked) + .slider { background-color: #d9534f; }

.pg-mediodepago-crud input:disabled + .slider { cursor: not-allowed; opacity: 0.7; }

/* ===== ProductoCRUD.aspx =====
   .tab-btn/.tab-content tienen su propia variante (aunque .tab-content coincide textualmente con
   CmsProductoConfig.aspx, se escopa igual por consistencia). El resto de clases son únicas de esta
   página. */
.pg-producto-crud .tab-btn { background: none; border: none; padding: 12px 20px; font-size: 0.95rem; font-weight: 600; color: #64748b; cursor: pointer; border-bottom: 3px solid transparent; transition: 0.2s; }
.pg-producto-crud .tab-btn:hover { color: var(--primary); }
.pg-producto-crud .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.pg-producto-crud .tab-content { display: none; }
.pg-producto-crud .tab-content.active { display: block; }
.pg-producto-crud .sub-section-box { background: #f8fafc; border: 1px solid #e2e8f0; padding: 20px; border-radius: 8px; margin-bottom: 25px; }
.pg-producto-crud .inner-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
.pg-producto-crud .inner-table th { background: #f1f5f9; padding: 10px; font-size: 0.85rem; text-align: left; font-weight: 600; color: #475569; }
.pg-producto-crud .inner-table td { padding: 12px 10px; border-bottom: 1px solid #e2e8f0; font-size: 0.9rem; }

/* ===== ArticuloBlogCRUD.aspx =====
   .toggle-container/.toggle-label/.toggle-switch/.slider aquí tienen reglas extra (input:checked)
   que no coinciden exactamente con ninguna otra página, así que se escopa todo bajo
   .pg-articulo-blog-crud. El @keyframes se renombra porque los nombres de @keyframes NO se
   pueden "escopar" con un selector — son un espacio de nombres global aparte, y CategoriaCRUD.aspx
   ya tiene su propio "fadeIn" con contenido distinto. */
.pg-articulo-blog-crud .admin-tabs-header { display: flex; border-bottom: 2px solid #eee; margin-bottom: 30px; gap: 10px; }
.pg-articulo-blog-crud .admin-tab-btn {
    padding: 15px 30px; font-size: 1.1rem; font-weight: 600; color: #888;
    background: transparent; border: none; border-bottom: 3px solid transparent;
    cursor: pointer; transition: all 0.3s; margin-bottom: -2px; border-radius: 6px 6px 0 0;
}
.pg-articulo-blog-crud .admin-tab-btn:hover { color: var(--primary); background: #f9f9f9; }
.pg-articulo-blog-crud .admin-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); background: transparent; }

.pg-articulo-blog-crud .admin-tab-content { display: none; animation: articuloBlogCrudFadeIn 0.4s ease; }
.pg-articulo-blog-crud .admin-tab-content.active { display: block; }

@keyframes articuloBlogCrudFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.pg-articulo-blog-crud .toggle-container { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.pg-articulo-blog-crud .toggle-label { font-weight: 600; color: #555; font-size: 0.95rem; }
.pg-articulo-blog-crud .toggle-switch { position: relative; display: inline-block; width: 54px; height: 30px; }
.pg-articulo-blog-crud .toggle-switch input { opacity: 0; width: 0; height: 0; }
.pg-articulo-blog-crud .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.pg-articulo-blog-crud .slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.pg-articulo-blog-crud input:checked + .slider { background-color: #28a745; }
.pg-articulo-blog-crud input:checked + .slider:before { transform: translateX(24px); }

.pg-articulo-blog-crud .plantilla-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; margin-top: 10px; }
.pg-articulo-blog-crud .plantilla-card { border: 2px solid #eee; border-radius: 10px; padding: 16px; cursor: pointer; transition: all 0.2s; }
.pg-articulo-blog-crud .plantilla-card:hover { border-color: #ccc; }
.pg-articulo-blog-crud .plantilla-card.selected { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(107,112,92,0.15); }
.pg-articulo-blog-crud .plantilla-card strong { display: block; margin-bottom: 6px; color: #333; }
.pg-articulo-blog-crud .plantilla-card p { font-size: 0.85rem; color: #777; margin: 0; }

/* ===== PersonaCRUD.aspx =====
   .tab-btn tiene su propia variante (radio, colores, sin el mismo .active que las demás), y
   .portfolio-grid casi coincide con ComentariosBlog.aspx pero no es 100% idéntico (un
   "text-align: left" de más) — se escopa todo bajo .pg-persona-crud. */
.pg-persona-crud .main-tab-btn { background: transparent; border: none; border-bottom: 3px solid transparent; padding: 12px 20px; font-size: 1.05rem; font-weight: 600; color: #64748b; cursor: pointer; transition: 0.2s; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.pg-persona-crud .main-tab-btn:hover { color: var(--primary); }
.pg-persona-crud .main-tab-btn.active-tab { color: var(--primary); border-bottom-color: var(--primary); }

.pg-persona-crud .tab-btn { background: transparent; border: 1px solid transparent; padding: 10px 20px; font-weight: 600; font-size: 0.9rem; color: #475569; border-radius: 6px; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px; }
.pg-persona-crud .tab-btn:hover { background: #f1f5f9; color: #1e293b; }
.pg-persona-crud .tab-btn.active-tab { background: #e2e8f0; color: #0f172a; border-color: #cbd5e1; }

.pg-persona-crud .btn-portfolio-action {
    background-color: #1e293b !important;
    color: #ffffff !important;
    border: 1px solid #1e293b !important;
    font-weight: 600 !important;
    padding: 10px 25px !important;
    font-size: 0.9rem !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}
.pg-persona-crud .btn-portfolio-action:hover {
    background-color: #0f172a !important;
    border-color: #0f172a !important;
}

.pg-persona-crud .portfolio-grid { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 0.9rem; }
.pg-persona-crud .portfolio-grid th { padding: 12px 15px; background: #f8fafc; font-weight: 600; text-align: left; color: #475569; border-bottom: 2px solid #e2e8f0; }
.pg-persona-crud .portfolio-grid td { padding: 12px 15px; border-bottom: 1px solid #e2e8f0; color: #334155; text-align: left; vertical-align: middle; }
.pg-persona-crud .portfolio-grid tr:hover { background: #f8fafc; }
.pg-persona-crud .portfolio-grid .text-center { text-align: center !important; }

/* ===== AsistenteInicial.aspx =====
   .wizard-* es único de esta página, sin conflicto. .paleta-*/.estructura-* SÍ se repiten en
   ConfigPanel.aspx pero con el mismo contenido exacto (verificado línea por línea), así que se
   declaran aquí UNA sola vez sin ámbito — ConfigPanel.aspx no las vuelve a declarar. */
.wizard-container { max-width: 900px; margin: 0 auto; }

.wizard-stepper { display: flex; justify-content: space-between; margin-bottom: 35px; position: relative; }
.wizard-stepper::before { content: ''; position: absolute; top: 18px; left: 0; right: 0; height: 2px; background: #e5e5e5; z-index: 0; }
.wizard-step-dot { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }
.wizard-step-circle { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2px solid #e5e5e5; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #999; }
.wizard-step-label { font-size: 0.8rem; color: var(--text-light); text-align: center; }
.wizard-step-dot.activo .wizard-step-circle { border-color: var(--primary); color: var(--primary); }
.wizard-step-dot.completado .wizard-step-circle { border-color: var(--primary); background: var(--primary); color: #fff; }
.wizard-step-dot.activo .wizard-step-label { color: var(--primary); font-weight: 600; }

.wizard-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 700px) { .wizard-form-grid { grid-template-columns: 1fr; } }
.wizard-nav { display: flex; justify-content: space-between; margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; }

.wizard-check-copiar { display: flex; align-items: center; gap: 10px; background: #f9f9f9; padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; }

.paleta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 15px; margin-top: 10px; }
.paleta-card { border: 2px solid #eee; border-radius: 10px; padding: 12px; cursor: pointer; transition: all 0.2s; }
.paleta-card:hover { border-color: #ccc; }
.paleta-card.selected { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(107,112,92,0.15); }
.paleta-swatches { display: flex; gap: 6px; margin-bottom: 8px; }
.paleta-swatch { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.12); }
.paleta-nombre { font-size: 0.85rem; font-weight: 600; color: #444; }

.estructura-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; margin-top: 10px; }
.estructura-card { border: 2px solid #eee; border-radius: 10px; padding: 16px; cursor: pointer; transition: all 0.2s; }
.estructura-card:hover { border-color: #ccc; }
.estructura-card.selected { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(107,112,92,0.15); }
.estructura-card strong { display: block; margin-bottom: 6px; color: #333; }
.estructura-card p { font-size: 0.85rem; color: var(--text-light); margin: 0; }

.wizard-resumen-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f1f1f1; }
.wizard-resumen-item:last-child { border-bottom: none; }

.wizard-estado-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; }
.wizard-estado-ok { background: #dff0d8; color: #3c763d; }
.wizard-estado-vacio { background: #f5f5f5; color: #666; }

/* ===== ConfigPanel.aspx =====
   .tab-btn tiene su propia variante (fondo al activo, sin display:flex en el base), así que se
   escopa con .config-container (la clase raíz que ya tenía la página, no hace falta inventar una
   nueva). .paleta-*/.estructura-* NO se repiten aquí — ya están declaradas en la sección de
   AsistenteInicial.aspx más arriba (contenido idéntico). */
.config-container { max-width: 1000px; margin: 20px auto; }
.config-container .tab-menu { display: flex; flex-wrap: wrap; gap: 10px; border-bottom: 1px solid #eee; margin-bottom: 30px; }
.config-container .tab-btn { padding: 12px 25px; cursor: pointer; border: none; background: none; font-weight: 600; color: var(--text-light); border-bottom: 3px solid transparent; transition: all 0.3s; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.config-container .tab-btn:hover { color: var(--primary); }
.config-container .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); background-color: rgba(107, 112, 92, 0.05); }

.config-container .placeholder-tab { text-align: center; padding: 60px; color: var(--text-light); }
.config-container .placeholder-tab i { font-size: 4rem; opacity: 0.3; margin-bottom: 15px; display: block; }

.config-container .footer-builder-col { border: 1px solid #eee; border-radius: 10px; padding: 16px; margin-bottom: 15px; }
.config-container .footer-builder-col-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.config-container .footer-col-mover { flex: 0 0 auto; border: 1px solid #ddd; background: #fff; border-radius: 6px; width: 28px; height: 28px; cursor: pointer; color: #555; display: inline-flex; align-items: center; justify-content: center; }
.config-container .footer-col-mover:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.config-container .footer-col-mover:disabled { opacity: 0.3; cursor: not-allowed; }
.config-container .footer-enlace-row { display: flex; gap: 10px; margin-bottom: 8px; align-items: center; }
.config-container .footer-enlace-row .admin-form-control { margin-bottom: 0; }
.config-container .footer-enlace-texto { flex: 1 1 20%; }
.config-container .footer-enlace-catalogo { flex: 1 1 25%; }
.config-container .footer-enlace-url { flex: 1.5 1 30%; }
.config-container .footer-enlace-quitar { flex: 0 0 auto; border: none; background: none; color: var(--color-danger, #d9534f); cursor: pointer; font-size: 1.1rem; padding: 4px 8px; }
.config-container .footer-enlace-anadir { border: 1px dashed #ccc; background: none; border-radius: 8px; padding: 8px 14px; cursor: pointer; color: var(--primary); font-weight: 500; font-size: 0.85rem; }
.config-container .footer-enlace-anadir:hover { border-color: var(--primary); }
.config-container .menu-item-movers { display: flex; gap: 4px; flex: 0 0 auto; }
.config-container .menu-item-row-separador { background: #f7f7f7; border-radius: 8px; padding: 6px 10px; }
.config-container .menu-item-separador-label { flex: 1; color: var(--text-light); font-style: italic; font-size: 0.85rem; display: flex; align-items: center; gap: 6px; }

.config-container .analytics-motor-radios td { padding: 10px 0; }
.config-container .analytics-motor-radios td label { margin-left: 8px; color: #333; }
.config-container .analytics-subpanel { display: none; margin-top: 25px; padding-top: 20px; border-top: 1px solid #eee; }
.config-container .analytics-subpanel.activo { display: block; }
.config-container .analytics-estado-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; }
.config-container .analytics-estado-ok { background: #dff0d8; color: #3c763d; }
.config-container .analytics-estado-falta { background: #fff3cd; color: #8a6d3b; }

/* ===== Default.aspx (dashboard del panel) ===== */
.dash-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 25px; }
.dash-stat-card { background: #fff; border-radius: 8px; padding: 20px 22px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border-left: 4px solid var(--primary, #6B705C); }
.dash-stat-card.dash-stat-alert { border-left-color: #c0392b; }
.dash-stat-label { font-size: 0.85rem; color: var(--text-light, #888); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.dash-stat-value { font-size: 1.8rem; font-weight: 700; color: #333; }
.dash-stat-sub { font-size: 0.85rem; color: var(--text-light, #888); margin-top: 4px; }
.dash-stat-sub a { color: inherit; text-decoration: none; font-weight: 600; }
.dash-stat-sub a:hover { text-decoration: underline; }

.dash-main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .dash-main-grid { grid-template-columns: 1fr; } }

.dash-trafico-grid { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 25px; }
@media (max-width: 900px) { .dash-trafico-grid { grid-template-columns: 1fr; } }
.dash-trafico-stat .dash-stat-value { font-size: 1.6rem; }

.dash-panel-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.dash-panel-title h4 { margin: 0; color: var(--primary, #6B705C); font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.dash-panel-title a { font-size: 0.85rem; color: var(--primary, #6B705C); text-decoration: none; font-weight: 500; white-space: nowrap; }
.dash-panel-title a:hover { text-decoration: underline; }

.dash-widget-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f1f1f1; gap: 10px; }
.dash-widget-row:last-child { border-bottom: none; }
.dash-widget-main { font-weight: 500; color: #333; }
.dash-widget-sub { font-size: 0.8rem; color: var(--text-light, #888); }
.dash-widget-empty { text-align: center; padding: 25px 10px; color: #999; font-size: 0.9rem; }
.dash-widget-empty i { font-size: 2rem; display: block; margin-bottom: 8px; opacity: 0.4; }

.dash-side-stack { display: flex; flex-direction: column; gap: 20px; }

.dash-banner-asistente { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; margin-bottom: 20px; border-left: 4px solid var(--accent, #CB997E); }
.dash-banner-asistente a { text-decoration: none; padding: 10px 22px; border-radius: 6px; white-space: nowrap; }

/* ===== CmsPortadaCRUD.aspx =====
   El constructor de widgets del CMS, la página más grande y delicada de toda la trastienda
   (~1800 líneas de JS). .slider/.seo-counter/.img-preview-box tienen variantes distintas de
   las de CategoriaCRUD.aspx, así que se escopa TODO bajo .pg-cms-portada-crud. Hallazgo
   importante: .is-invalid aquí tenía su propia definición (fondo #fffcfc, sin box-shadow),
   pero AdminMaster.css YA define .is-invalid de forma global (fondo #fffafa, con box-shadow,
   linea 724) para TODAS las páginas de la trastienda — si esta regla se hubiera dejado sin
   ámbito, habría sobreescrito silenciosamente el estilo de validación de TODOS los demás
   formularios (AdminForms.css se carga después de AdminMaster.css). Por eso también va
   escopada, igual que el resto de esta sección. */
        .pg-cms-portada-crud .admin-header-panel {
            background: #fff;
            border-radius: 8px;
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            margin-bottom: 30px;
            border: 1px solid #eee;
        }

        .pg-cms-portada-crud .toggle-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .pg-cms-portada-crud .toggle-label {
            font-weight: 600;
            color: #555;
            font-size: 0.95rem;
        }

        .pg-cms-portada-crud .toggle-switch {
            position: relative;
            display: inline-block;
            width: 54px;
            height: 30px;
        }

            .pg-cms-portada-crud .toggle-switch input {
                opacity: 0;
                width: 0;
                height: 0;
            }

        .pg-cms-portada-crud .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #d9534f;
            transition: .4s;
            border-radius: 34px;
        }

            .pg-cms-portada-crud .slider:before {
                position: absolute;
                content: "";
                height: 22px;
                width: 22px;
                left: 4px;
                bottom: 4px;
                background-color: white;
                transition: .4s;
                border-radius: 50%;
                box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            }

        .pg-cms-portada-crud input:checked + .slider {
            background-color: #28a745;
        }

            .pg-cms-portada-crud input:checked + .slider:before {
                transform: translateX(24px);
            }

        .pg-cms-portada-crud .visual-builder {
            background: #fdfdfd;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 25px;
            margin-bottom: 30px;
            display: none;
        }

        .pg-cms-portada-crud .vb-hero {
            border-left: 4px solid #0288d1;
        }

        .pg-cms-portada-crud .vb-mixto {
            border-left: 4px solid #28a745;
        }

        .pg-cms-portada-crud .vb-contenidohtml {
            border-left: 4px solid #3f51b5;
        }

        .pg-cms-portada-crud .vb-categorias {
            border-left: 4px solid #f57c00;
        }

        .pg-cms-portada-crud .vb-destacada {
            border-left: 4px solid #8e24aa;
        }

        .pg-cms-portada-crud .vb-titulo {
            border-left: 4px solid #e91e63;
        }

        .pg-cms-portada-crud .vb-separador {
            border-left: 4px solid #9e9e9e;
        }

        .pg-cms-portada-crud .vb-productos {
            border-left: 4px solid #1976d2;
        }

        .pg-cms-portada-crud .vb-proddest {
            border-left: 4px solid #00bfa5;
        }

        .pg-cms-portada-crud .vb-cuadlib {
            border-left: 4px solid #d84315;
        }

        /* ESTILO INTEGRADO: COLOR IDENTIFICATIVO VERDE SUTIL PARA CONTACTO */
        .pg-cms-portada-crud .vb-contacto {
            border-left: 4px solid #4caf50;
        }

        .pg-cms-portada-crud .visual-builder h3 {
            margin-top: 0;
            margin-bottom: 20px;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .pg-cms-portada-crud .builder-group {
            margin-bottom: 15px;
        }

            .pg-cms-portada-crud .builder-group label {
                display: block;
                font-weight: 600;
                margin-bottom: 5px;
                font-size: 0.9rem;
            }

        .pg-cms-portada-crud .json-section {
            opacity: 0.7;
            transition: 0.3s;
        }

            .pg-cms-portada-crud .json-section:hover {
                opacity: 1;
            }

        .pg-cms-portada-crud .slide-edit-card {
            border: 1px solid #ddd;
            background: #fff;
            border-radius: 8px;
            margin-bottom: 25px;
            position: relative;
            box-shadow: 0 4px 15px rgba(0,0,0,0.03);
            overflow: hidden;
            transition: 0.3s;
        }

        .pg-cms-portada-crud .slide-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f8f9fa;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            user-select: none;
            transition: 0.2s;
            border-left: 4px solid transparent;
        }

            .pg-cms-portada-crud .slide-header:hover {
                background: #f1f3f5;
            }

        .pg-cms-portada-crud .slide-title-area {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .pg-cms-portada-crud .slide-number {
            font-weight: bold;
            color: var(--primary);
            font-size: 1.1rem;
            transition: 0.2s;
        }

        .pg-cms-portada-crud .slide-preview-title {
            font-size: 0.95rem;
            color: #666;
            font-style: italic;
            transition: 0.2s;
        }

        .pg-cms-portada-crud .slide-header.slide-hidden {
            background: #fdfdfd;
            opacity: 0.75;
            border-left-color: #d9534f;
        }

            .pg-cms-portada-crud .slide-header.slide-hidden .slide-number, .pg-cms-portada-crud .slide-header.slide-hidden .slide-preview-title {
                text-decoration: line-through;
                color: #999;
            }

        .pg-cms-portada-crud .slide-actions {
            display: flex;
            gap: 8px;
        }

            .pg-cms-portada-crud .slide-actions button {
                padding: 4px 10px;
                font-size: 0.9rem;
                border-radius: 4px;
                cursor: pointer;
                border: 1px solid #ccc;
                background: #fff;
                transition: 0.2s;
            }

                .pg-cms-portada-crud .slide-actions button:hover {
                    background: #eee;
                }

        .pg-cms-portada-crud .btn-move {
            color: #555;
        }

        .pg-cms-portada-crud .btn-toggle-vis {
            color: #0288d1;
        }

        .pg-cms-portada-crud .btn-delete {
            color: #d9534f !important;
            border-color: #d9534f !important;
        }

            .pg-cms-portada-crud .btn-delete:hover {
                background: #d9534f !important;
                color: white !important;
            }

        .pg-cms-portada-crud .slide-body {
            padding: 30px;
            display: none;
        }

        .pg-cms-portada-crud .seo-label {
            color: #0277bd;
            font-weight: 600;
            margin-bottom: 8px;
            display: block;
            transition: color 0.3s;
        }

            .pg-cms-portada-crud .seo-label.error {
                color: #d9534f !important;
            }

        .pg-cms-portada-crud .seo-counter {
            font-weight: normal;
            font-size: 0.8rem;
            color: #666;
            float: right;
        }

        .pg-cms-portada-crud .seo-label.error .seo-counter {
            color: #d9534f;
            font-weight: bold;
        }

        .pg-cms-portada-crud .img-preview-box {
            width: 100%;
            min-height: 120px;
            background: #f9f9f9;
            border: 2px dashed #ddd;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            overflow: hidden;
            padding: 10px;
        }

            .pg-cms-portada-crud .img-preview-box img {
                max-width: 100%;
                max-height: 200px;
                object-fit: contain;
                border-radius: 4px;
            }

        .pg-cms-portada-crud .simple-file-upload {
            display: block;
            width: 100%;
            padding: 10px;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
        }

        .pg-cms-portada-crud .is-invalid {
            border-color: #d9534f !important;
            background-color: #fffcfc !important;
        }

        .pg-cms-portada-crud .theme-swatch-row {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 6px;
            flex-wrap: wrap;
        }

        .pg-cms-portada-crud .theme-swatch-btn {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 2px solid #fff;
            box-shadow: 0 0 0 1px #d1d5db;
            cursor: pointer;
            padding: 0;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }

        .pg-cms-portada-crud .theme-swatch-btn:hover {
            transform: scale(1.15);
        }

        .pg-cms-portada-crud .theme-swatch-btn.active {
            box-shadow: 0 0 0 2px var(--primary, #6B705C);
        }

        /* ================================================================
           EDITOR DE TEXTO ENRIQUECIDO (descripciones que se ven en la web)
           ================================================================ */
        .pg-cms-portada-crud .rte-wrapper {
            margin-bottom: 5px;
        }

        .pg-cms-portada-crud .rte-wrapper .ql-toolbar.ql-snow {
            border-radius: 6px 6px 0 0;
            background: #f8f9fa;
        }

        .pg-cms-portada-crud .rte-wrapper .ql-container.ql-snow {
            border-radius: 0 0 6px 6px;
            font-size: 1rem;
        }

        .pg-cms-portada-crud .rte-wrapper .ql-editor {
            min-height: 110px;
        }

        .pg-cms-portada-crud .rte-wrapper .ql-picker-options {
            z-index: 20;
        }

        .pg-cms-portada-crud .rte-counter {
            text-align: right;
            font-size: 0.8rem;
            color: #888;
            margin-top: 4px;
        }

        /* ================================================================
           MODAL DEL RECORTADOR DE IMAGEN
           ================================================================ */
        .pg-cms-portada-crud .crop-modal-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(20, 20, 20, 0.75);
            z-index: 99999;
            align-items: center;
            justify-content: center;
        }

            .pg-cms-portada-crud .crop-modal-overlay.active {
                display: flex;
            }

        .pg-cms-portada-crud .crop-modal {
            background: #fff;
            border-radius: 10px;
            width: min(700px, 92vw);
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.4);
        }

        .pg-cms-portada-crud .crop-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 22px;
            border-bottom: 1px solid #eee;
        }

            .pg-cms-portada-crud .crop-modal-header h3 {
                margin: 0;
                font-size: 1.1rem;
            }

        .pg-cms-portada-crud .crop-modal-close {
            background: none;
            border: none;
            font-size: 1.6rem;
            line-height: 1;
            cursor: pointer;
            color: #888;
        }

        .pg-cms-portada-crud .crop-modal-body {
            background: #2b2b2b;
            max-height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

            .pg-cms-portada-crud .crop-modal-body img {
                display: block;
                max-width: 100%;
            }

        .pg-cms-portada-crud .crop-modal-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 15px;
            padding: 16px 22px;
        }

        .pg-cms-portada-crud .crop-modal-hint {
            font-size: 0.85rem;
            color: #888;
        }

            .pg-cms-portada-crud .btn-vista-previa {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 10px 22px;
                border: none;
                border-radius: 30px;
                background: var(--primary);
                color: #fff;
                font-family: var(--font-body);
                font-weight: 600;
                font-size: 0.9rem;
                letter-spacing: 0.2px;
                cursor: pointer;
                box-shadow: 0 4px 14px rgba(107, 112, 92, 0.3);
                transition: var(--transition);
            }
            .btn-vista-previa i { font-size: 1.15rem; }
            .pg-cms-portada-crud .btn-vista-previa:hover {
                background: var(--primary-light);
                transform: translateY(-2px);
                box-shadow: 0 6px 18px rgba(107, 112, 92, 0.4);
            }
            .pg-cms-portada-crud .vista-previa-panel {
                display: none;
                position: fixed; top: 0; right: 0; bottom: 0;
                width: min(720px, 92vw);
                background: #fff;
                box-shadow: -10px 0 30px rgba(0,0,0,0.2);
                z-index: 9998;
                flex-direction: column;
            }
            .vista-previa-panel.activo { display: flex; }
            .pg-cms-portada-crud .vista-previa-header {
                display: flex; align-items: center; justify-content: space-between;
                padding: 10px 15px; border-bottom: 1px solid #eee; background: #fafafa;
            }
            .vista-previa-modos { display: flex; gap: 8px; }
            .pg-cms-portada-crud .vista-previa-modos button {
                padding: 6px 14px; border-radius: 20px; border: 1px solid #ddd; background: #fff; cursor: pointer;
                font-family: var(--font-body); font-size: 0.85rem; transition: var(--transition);
            }
            .vista-previa-modos button.activo { background: var(--primary); color: #fff; border-color: var(--primary); }
            .vista-previa-cerrar { background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: #888; }
            #widgetPreviewFrame { flex: 1; width: 100%; border: 0; }