/*
 CARGODEC LEGACY STYLE
 ORDEN=50
 ID=mobile-fotos-fix
 EXTRAIDO_DE=index.html
*/


/* ==========================================================
   CARGODEC - EQUIPO / FOTOS - TELEFONO
   Solo afecta pantallas pequenas.
   ========================================================== */

@media (max-width: 768px) {

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    margin: 0 !important;
  }

  #fotos {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #fotoForm {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #fotoForm * {
    box-sizing: border-box !important;
  }

  /* Campos comodos para dedo y evita zoom automatico de iPhone */
  #fotoForm input:not([type="file"]),
  #fotoForm select,
  #fotoForm textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }

  #fotoForm textarea {
    min-height: 90px !important;
  }

  /* Bloques de fotografia uno debajo del otro */
  #fotoForm .equipoPhotoBlock {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 !important;
  }

  #fotoForm .equipoPhotoSplit {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
  }

  /* Boton AGREGAR FOTO grande */
  #fotoForm .equipoUpload {
    display: flex !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 12px 16px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-size: 17px !important;
    text-align: center !important;
    cursor: pointer !important;
  }

  /* Vista previa de foto */
  #fotoForm .equipoPreview {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 320px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }

  /* Los file inputs pueden seguir ocultos */
  #fotoForm input[type="file"] {
    max-width: 100% !important;
  }

  /* Botones del formulario */
  #fotoForm button,
  #fotos button {
    min-height: 48px;
    font-size: 16px;
    touch-action: manipulation;
  }

  /* Si existen filas o grids dentro del formulario,
     convertirlos a una sola columna en telefono */
  #fotoForm .row,
  #fotoForm .grid,
  #fotoForm .formRow,
  #fotoForm .form-grid {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  /* Tarjetas de equipos */
  #fotos .equipoCard,
  #fotos .savedCard {
    width: 100% !important;
    max-width: 100% !important;
  }

  #fotos .equipoCardActions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  #fotos .equipoCardActions button {
    width: 100% !important;
  }

  /* Miniaturas comodas para tocar */
  #fotos .thumbSmall {
    max-width: 46% !important;
    height: auto !important;
  }
}