* { box-sizing: border-box; }    

    .sob-contenedor-campo { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; }
 
    .widget-header {      
      justify-content: space-between;
      align-items: center;      
    }        
    
    .widget-header .btn{ margin-bottom: 12px; margin-top: 12px;  }

    .res-badge {      
      font-size: 13px;
      font-weight: 600;      
      display: none;
    }
    
    .sob-campo-imagen-ampliado .res-badge { 
        display: inline-block;        
    }
    
    .sob-mensaje-aviso-cmp-img {
      background-color: #fef3c7;
      border: 1px solid #fde68a;
      color: #92400e;
      padding: 10px 12px;
      border-radius: 6px;
      font-size: 12px;
      line-height: 1.4;
      margin-bottom: 12px;
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }

    .sob-mensaje-aviso-cmp-img-icon {
      font-size: 14px;
      flex-shrink: 0;
    }
 
    .sob-contenedor-vista {
      position: relative;
      width: 100%;
      height: 500px;
      background-color: var(--colorCorporativo3_b_17);
      border: 2px dashed var(--colorCorporativo3_b_83);
      border-radius: 6px;
      overflow: hidden;
      margin: 0 auto 12px auto;
      user-select: none;
      touch-action: none;
    }
    
    .sob-contenedor-vista .sob-zona-movible p{ color: var(--colorCorporativo3_b_93); }

    /* Responsivo para pantallas menores a 556px (Requerimiento 2) */
    @media (max-width: 556px) {
      .sob-contenedor-vista {
        width: 100% !important;
        height: 90vw !important;
      }      
      
    }

    /* Zona para soltar/subir imagen */
    .sob-zona-movible {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;      
      cursor: pointer;
      z-index: 20;
      background: rgba(20, 20, 20, 0.40);
      transition: background 0.2s;
      text-align: center;
      padding: 15px;
    }
    .sob-zona-movible:hover { background: rgba(20, 20, 20, 0.50); }
    .sob-zona-movible input { display: none; }

    /* Imagen Base Estática */
    .sob-muestra-imagen {
      position: absolute;
      pointer-events: none;
      display: none;
    }

    /* Recuadro de Selección Flotante e Interactivo (Requerimiento 3) */
    .sob-caja-recorte {
      position: absolute;
      border: 2px solid var(--colorCorporativo3_b_75);
      /* Máscara oscura para todo lo que queda fuera de la selección */
      box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.66);
      cursor: move;
      display: none;
      z-index: 10;
      touch-action: none;
    }

    /* Manijas de Escalado */
    .scale-handle {
      position: absolute;
      width: 14px;
      height: 14px;
      background: var(--colorCorporativo3_b_75);
      border: 2px solid #ffffff;
      border-radius: 50%;
      z-index: 15;
    }
    .handle-tl { top: -7px; left: -7px; cursor: nwse-resize; }
    .handle-tr { top: -7px; right: -7px; cursor: nesw-resize; }
    .handle-bl { bottom: -7px; left: -7px; cursor: nesw-resize; }
    .handle-br { bottom: -7px; right: -7px; cursor: nwse-resize; }

    

    .inputs-group { 
      display: flex;        
      align-items: center; 
      flex-wrap: wrap;
    }
    
    .input-field { align-items: center; font-size: 13px; }
    
    
    .input-field input {      
      padding: 4px 6px;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      font-size: 13px;
    }

    .btn {
      background: var(--colorCorporativo1_77);
      color: white;
      border: none;      
      border-radius: 4px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      transition: background 0.2s;
      white-space: nowrap;
    }
    .btn:hover { background: var(--colorCorporativo1); }
    .btn-secondary { background: var(--colorCorporativo2_77); }
    .btn-secondary:hover { background: var(--colorCorporativo2); }
    
    .btn i{ font-size: 17pt; }
    
    .sob-campo-imagen-ampliado .sob-superior .btn-secondary { background: var(--colorCorporativo2_b_57); }
    .sob-campo-imagen-ampliado .sob-superior .btn-secondary:hover { background: var(--colorCorporativo2_b_61); }
    
    .btn-success { background: var(--colorCorporativo1_c_77); }
    .btn-success:hover { background: var(--colorCorporativo1_c_98); }
    
    .sob-campo-imagen-ampliado .sob-superior .btn-success { background: var(--colorCorporativo1_b_70); }
    .sob-campo-imagen-ampliado .sob-superior .btn-success:hover { background: var(--colorCorporativo1_b_76); }    

    .input-field>div:first-child{ width: 10px; padding-right: 8px; }
    
    @media (min-width: 600px) {
        .btn {
            padding: 6px 12px;
        }
        .widget-header {      
            display: flex; 
            gap: 10px;
        }
        
        .res-badge {
            background: var(--colorCorporativo3_22);
            padding: 4px 8px;
            border-radius: 4px;
            color: var(--colorCorporativo3_c_15);
        }
        
        .action-buttons {
            display: flex;
            gap: 6px;
        }
        
        /* Barra de Controles */
        .controls-bar {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          align-items: center;
          justify-content: space-between;
          background: #F3F3F3;          
          
        }    
        
        .inputs-group {             
            gap: 8px;  
        }
        
        .input-field{ display: flex; gap: 8px; }
        .input-field input{ width: 65px; }
    }
    
    @media (max-width: 599px) {
        .btn {
            padding: 7px 12px; flex: 1;
        }
        
        .controls-bar .btn{ padding: 9px 12px; }
     
        .sob-campo-imagen-ampliado .res-badge { 
            display: table;
            margin: 0px auto 8px auto;
        }
        
        .action-buttons{ display: flex; flex-direction: row; }
        
        .action-buttons.sob-superior {             
            gap: 2%;
        }
        
        .action-buttons.sob-inferior {            
            gap: 4%;
            margin-bottom: 15px;
        }         
        
        .inputs-group {             
            gap: 2%;  
        }
        
        .inputs-group .sob-inp-x, .inputs-group .sob-inp-y { width: 24%; }
        .inputs-group .sob-inp-esc { width: 48%; }
                
        .input-field>div:last-child input{ width: 100%; }
    }

    /* Modo Pantalla Completa Modal (Requerimiento 4 Corregido) */
    .sob-campo-imagen-ampliado {
      position: fixed !important;
      inset: 0 !important;
      z-index: 9999 !important;
      background: rgba(10, 10, 10, 0.96) !important;
      padding: 0px !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      overflow-y: auto !important;
    }
    
    .sob-campo-imagen-ampliado .widget-header{ position: absolute; width: 100%; }

    .sob-campo-imagen-ampliado .widget-header { color: white; }
    .sob-campo-imagen-ampliado .res-badge { background: var(--colorCorporativo3_c_25); color: var(--colorCorporativo3_b_98); }

    .sob-campo-imagen-ampliado .sob-contenedor-vista {
      width: calc(100vh - 48px) !important;
      height: calc(100vh - 48px) !important;
      max-width: 90vw !important;
      max-height: 90vw !important;
      margin: auto;
    }    
    
    .btn.sob-btn-solo{ flex: 0; padding: 7px 50px;  }
    
    .sob-ocultar, .sob-campo-imagen-ampliado .sob-mensaje-aviso-cmp-img{ display: none; }
    
    .controls-bar { background-color: #F3F3F3; padding: 10px; }