/* Vistio Business 1.1.88 · Jerarquía móvil de herramientas del Workspace.
   Sólo móvil: Tarjetas, Vistio Link, Catálogos, Citas. No altera lógica, permisos ni escritorio. */
@media (max-width: 820px) {
  #workspace #view-content.vb188-tools {
    min-width: 0;
    --vb188-gold: #e7c28a;
    --vb188-line: rgba(218,177,107,.24);
  }
  #workspace #view-content.vb188-tools *,
  #workspace #view-content.vb188-tools *::before,
  #workspace #view-content.vb188-tools *::after {box-sizing:border-box}
  #workspace #view-content.vb188-tools .view-head {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin-bottom: 15px !important;
  }
  #workspace #view-content.vb188-tools .view-head .view-title {
    font-size: clamp(28px, 7.7vw, 39px) !important;
    line-height: 1.12 !important;
    margin: 5px 0 10px !important;
    overflow-wrap: break-word;
    word-break: normal;
  }
  #workspace #view-content.vb188-tools .view-head .view-sub {
    max-width: 54ch;
    font-size: 13px !important;
    line-height: 1.65 !important;
    color:#c9c0b2;
  }
  #workspace #view-content.vb188-tools .view-head .view-toolbar,
  #workspace #view-content.vb188-tools .view-head #new-resource {
    width: 100% !important;
    max-width: 100% !important;
  }
  #workspace #view-content.vb188-tools #new-resource {
    display:flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 50px !important;
    white-space: normal !important;
    padding: 12px 16px !important;
    text-align:center !important;
  }
  #workspace #view-content.vb188-tools .vb188-orientation {
    display:grid;
    grid-template-columns: minmax(0,1fr);
    gap: 8px;
    padding: 15px;
    margin: 0 0 15px;
    border:1px solid var(--vb188-line);
    border-radius:17px;
    background:linear-gradient(130deg,rgba(104,74,41,.23),rgba(22,22,24,.82) 60%);
    color: #efe3d2;
  }
  #workspace #view-content.vb188-tools .vb188-orientation > small {
    color:var(--vb188-gold);
    font-size: 10px;
    font-weight:800;
    letter-spacing:.13em;
  }
  #workspace #view-content.vb188-tools .vb188-orientation strong {
    font-size: 16px;
    line-height:1.25;
    font-weight:800;
  }
  #workspace #view-content.vb188-tools .vb188-orientation > p {
    font-size:12px;
    line-height:1.55;
    color:#c9bdab;
    margin:0;
  }
  #workspace #view-content.vb188-tools .vb188-process {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    margin-top: 4px;
  }
  #workspace #view-content.vb188-tools .vb188-process span {
    min-width:0;
    padding:9px 6px;
    border-radius:10px;
    border:1px solid rgba(215,177,111,.17);
    background:rgba(244,207,144,.055);
    text-align:center;
    font-size:clamp(10px,2.7vw,11px);
    color:#d7c6ae;
    line-height:1.35;
  }
  #workspace #view-content.vb188-tools .vb188-process b {
    display:block;
    font-size:10px;
    color:#e8c184;
    margin-bottom:3px;
  }
  #workspace #view-content.vb188-tools .resource-topline {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:6px !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 0 15px !important;
    border:1px solid rgba(229,190,127,.15);
    border-radius:14px;
    padding:12px !important;
    background:rgba(210,169,105,.047);
  }
  #workspace #view-content.vb188-tools .resource-topline > span {
    width:100%; min-width:0;
    font-size:12px;
    line-height:1.5;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  #workspace #view-content.vb188-tools .data-list {
    min-width:0;
    max-width:100%;
    overflow:visible;
  }
  #workspace #view-content.vb188-tools .data-list .list-header {
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:7px !important;
    margin:16px 0 11px !important;
    padding-inline:2px;
  }
  #workspace #view-content.vb188-tools .data-list .list-header h3 {
    font-size:18px !important;
    line-height:1.25 !important;
    margin:0;
  }
  #workspace #view-content.vb188-tools .data-item.v03-resource {
    display:grid !important;
    grid-template-columns:clamp(56px,17vw,78px) minmax(0,1fr) !important;
    gap:11px !important;
    width:100%;
    min-width:0;
    max-width:100%;
    padding:14px !important;
    align-items:start;
  }
  #workspace #view-content.vb188-tools .data-item.v03-resource .resource-art {
    width:100%;
    max-width:100%;
    aspect-ratio:1;
    min-width:0;
  }
  #workspace #view-content.vb188-tools .data-item.v03-resource .data-info {
    min-width:0;
    max-width:100%;
    width:100%;
  }
  #workspace #view-content.vb188-tools .data-item.v03-resource .data-info h3 {
    font-size:15px;
    line-height:1.35;
    overflow-wrap:anywhere;
  }
  #workspace #view-content.vb188-tools .data-item.v03-resource .data-info a,
  #workspace #view-content.vb188-tools .data-item.v03-resource .data-info p {
    display:block;
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
    font-size:12px;
  }
  #workspace #view-content.vb188-tools .data-item.v03-resource > .actions {
    grid-column:1 / -1;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px !important;
    width:100%; min-width:0;
    margin-top:4px;
  }
  #workspace #view-content.vb188-tools .data-item.v03-resource > .actions > button,
  #workspace #view-content.vb188-tools .data-item.v03-resource > .actions > .url-locked {
    display:flex !important;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    text-align:center;
    min-width:0;
    min-height:42px;
    width:100%;
    white-space:normal;
    font-size:12px;
    line-height:1.35;
    padding:8px;
  }
  #workspace #view-content.vb188-tools .data-item.v03-resource > .actions > .url-locked {grid-column:1 / -1}
  #workspace #view-content.vb188-tools .data-item.v03-resource > .actions > .danger {grid-column:1 / -1}

  /* Crear/editar: jerarquía clara, sin tocar los campos ni las acciones originales. */
  #workspace #view-content.vb188-tools #editor-root {min-width:0;max-width:100%}
  #workspace #view-content.vb188-tools .formbox.premium-editor {
    width:100%;min-width:0;max-width:100%;
    margin:12px 0 18px;
    overflow:visible;
    border-radius:20px;
  }
  #workspace #view-content.vb188-tools .premium-editor .formbox-head {padding:18px 16px 8px !important}
  #workspace #view-content.vb188-tools .premium-editor .formbox-head h3 {
    font-size:clamp(21px,6vw,28px)!important;line-height:1.25!important;
  }
  #workspace #view-content.vb188-tools .premium-editor .formbox-head p {font-size:12px;line-height:1.55}
  #workspace #view-content.vb188-tools .vb188-editor-rail {
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;margin:10px 13px 17px;
  }
  #workspace #view-content.vb188-tools .vb188-editor-rail button {
    border:1px solid rgba(223,180,112,.30);
    border-radius:12px;
    padding:10px 5px;
    background:rgba(212,169,104,.075);
    color:#f1d09a;
    min-height:49px;
    font-family:inherit;
    font-size:clamp(10px,2.7vw,12px);
    line-height:1.25;
    font-weight:700;
    cursor:pointer;
  }
  #workspace #view-content.vb188-tools .vb188-editor-rail button:focus-visible {
    outline:2px solid #f0d3a6;
    outline-offset:2px;
  }
  #workspace #view-content.vb188-tools #resource-form .editor-split {
    display:grid !important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:22px;
  }
  #workspace #view-content.vb188-tools #resource-form .form-content,
  #workspace #view-content.vb188-tools #resource-form .live-preview-column {
    min-width:0!important;max-width:100%!important;width:100%!important;
  }
  #workspace #view-content.vb188-tools #resource-form .form-content {padding-inline:clamp(13px,4vw,19px)!important}
  #workspace #view-content.vb188-tools .vb188-section-label {
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    gap:10px;
    align-items:start;
    margin:23px 0 13px;
    padding:13px 0 0;
    border-top:1px solid rgba(212,171,106,.19);
  }
  #workspace #view-content.vb188-tools .vb188-section-label:first-child {margin-top:0;padding-top:0;border:0}
  #workspace #view-content.vb188-tools .vb188-section-label .vb188-index {
    width:30px;height:30px;
    display:flex;align-items:center;justify-content:center;
    border-radius:10px;background:rgba(208,163,90,.13);
    color:#f0c887;font-size:12px;font-weight:800;
  }
  #workspace #view-content.vb188-tools .vb188-section-label strong {display:block;font-size:14px;line-height:1.35;color:#f0ddc1}
  #workspace #view-content.vb188-tools .vb188-section-label small {display:block;margin-top:3px;line-height:1.5;color:#a9a096;font-size:11px}
  #workspace #view-content.vb188-tools #resource-form .formgrid,
  #workspace #view-content.vb188-tools #vb-appt-editor .vb-booking-form-grid {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    min-width:0!important;
    gap:13px!important;
  }
  #workspace #view-content.vb188-tools #resource-form label,
  #workspace #view-content.vb188-tools #vb-appt-editor label {
    min-width:0;
    max-width:100%;
  }
  #workspace #view-content.vb188-tools #resource-form :is(input,textarea,select),
  #workspace #view-content.vb188-tools #vb-appt-editor :is(input:not([type=checkbox]),textarea,select) {
    box-sizing:border-box;
    width:100%; max-width:100%;min-width:0;
    font-size:16px;
    line-height:1.4;
  }
  #workspace #view-content.vb188-tools #resource-form .upload-actions {display:flex;flex-wrap:wrap;gap:9px}
  #workspace #view-content.vb188-tools #resource-form .form-actions,
  #workspace #view-content.vb188-tools #vb-appt-editor .vb-booking-actions {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    margin-top:20px!important;
  }
  #workspace #view-content.vb188-tools #resource-form .form-actions > button,
  #workspace #view-content.vb188-tools #vb-appt-editor .vb-booking-actions > button {
    width:100%;max-width:100%;min-height:47px;white-space:normal;
  }
  #workspace #view-content.vb188-tools #resource-form .live-preview-column {
    padding:17px 13px 18px;
    border-top:1px solid rgba(215,172,106,.26);
  }
  #workspace #view-content.vb188-tools #resource-form .preview-canvas {
    min-width:0;max-width:100%;width:100%;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }
  #workspace #view-content.vb188-tools #resource-form .preview-stage {margin-inline:auto}
  #workspace #view-content.vb188-tools .vb188-mobile-helper {
    margin:0 0 14px;
    padding:10px 12px;
    border:1px solid rgba(222,177,108,.19);
    border-radius:12px;
    color:#c6baa9;
    font-size:12px;
    line-height:1.55;
    background:rgba(203,160,90,.055);
  }
  /* Agendas: configuración y acciones agrupadas, sin intervenir en su lógica. */
  #workspace #view-content.vb188-tools .vb-booking-admin-controls {
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:11px!important;
    min-width:0;
    margin-block:12px;
  }
  #workspace #view-content.vb188-tools .vb-booking-admin-controls [data-appt-new] {
    width:100%!important;
    min-height:47px;
  }
  #workspace #view-content.vb188-tools .vb-booking-list,
  #workspace #view-content.vb188-tools .vb-booking-panel,
  #workspace #view-content.vb188-tools .vb-booking-summary {min-width:0!important;max-width:100%!important;width:100%!important}
  #workspace #view-content.vb188-tools .vb-booking-summary {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
    padding:15px!important;
  }
  #workspace #view-content.vb188-tools .vb-booking-summary a,
  #workspace #view-content.vb188-tools .vb-booking-summary p {overflow-wrap:anywhere;word-break:break-word}
  #workspace #view-content.vb188-tools .vb-booking-summary .vb-booking-actions {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%;
  }
  #workspace #view-content.vb188-tools .vb-booking-summary .vb-booking-actions button {
    width:100%; min-width:0;min-height:44px;font-size:12px;padding:9px 6px;
  }
  #workspace #view-content.vb188-tools .vb-booking-panel {padding:15px!important}
  #workspace #view-content.vb188-tools #vb-appt-editor {
    display:grid;grid-template-columns:minmax(0,1fr);
    gap:14px;
    min-width:0;width:100%;
  }
  #workspace #view-content.vb188-tools #vb-appt-editor fieldset {min-width:0;max-width:100%}
  #workspace #view-content.vb188-tools #vb-appt-editor .vb-booking-days > div {
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  }
  #workspace #view-content.vb188-tools #vb-appt-editor .vb-booking-days input[type=checkbox] {width:auto;min-width:16px}
  #workspace #view-content.vb188-tools #vb-appt-detail {max-width:100%;min-width:0}
}
@media(max-width:360px) {
  #workspace #view-content.vb188-tools .vb188-process {gap:4px}
  #workspace #view-content.vb188-tools .vb188-editor-rail {margin-inline:9px;gap:5px}
  #workspace #view-content.vb188-tools .data-item.v03-resource {padding:11px!important;gap:9px!important}
  #workspace #view-content.vb188-tools #vb-appt-editor .vb-booking-days > div {grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce) {
  #workspace #view-content.vb188-tools .vb188-editor-rail button {scroll-behavior:auto}
}