/**********************************************************
= = =  PERFIL EMPRESA – ESTILOS BASE  = = =
**********************************************************/
:root{
  --emp-primary:#2196F3;
  --emp-accent:#FA1188;
  --emp-text:#1a1f36;
  --emp-muted:#667085;
  --emp-line:#e9eef5;
  --emp-bg:#fff;
}

.emp-perfil-wrap{
  max-width:800px!important;
  margin:20px auto;
  padding:20px;
  background:var(--emp-bg);
}

.emp-title{
  color:var(--emp-primary) !important;
  margin:0 0 16px;
  font-size:22px !important;
  font-weight:700;
  text-align:center;
  text-transform: uppercase !important;
}

.emp-perfil-wrap h2{
  font-size:16px !important;
  line-height:1.25;
  color:var(--emp-primary) !important;
  font-weight:700 !important;
  margin:0 0 14px !important;
    text-transform: uppercase !important;
}

/**********************************************************
= = =  CARDS / SECCIONES  = = =
**********************************************************/
.emp-card{
  background:#fff;
  border:1px solid var(--emp-line);
  border-radius:12px;
  padding:20px;
  margin:18px 0;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}

.emp-card-title{
  font-size:14px !important ;
  font-weight:700;
  color:var(--emp-primary);
  margin:0 0 14px;
}

/* Fila superior (logo + nombre) */
.emp-top-row{
  display:flex;
  gap:20px;
  margin-bottom:10px;
}

/**********************************************************
= = =  GRID / LAYOUT INTERNO  = = =
**********************************************************/
.emp-section-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

@media (max-width:1020px){
  .emp-section-grid{ grid-template-columns:1fr; }
  .emp-top-row{ flex-direction:column; }
}

/**********************************************************
= = =  CAMPOS DE FORMULARIO  = = =
**********************************************************/
.emp-field{ margin-bottom:10px; }

.emp-field label{
  display:block;
  font-weight:600;
  color:var(--emp-text);
  margin-bottom:6px;
}

.emp-field input,
.emp-field select,
#descripcion_empresa{
  width:100%;
  min-height:42px;
  padding:10px;
  border:1px solid #ccc;
  border-radius:8px;
  font:inherit;
  background:#fff;
  outline:none;
  box-sizing:border-box;
}

.emp-field input:focus,
.emp-field select:focus,
#descripcion_empresa:focus{
  border-color:var(--emp-primary);
  box-shadow:0 0 0 2px rgba(33,150,243,.12);
}

#descripcion_empresa{
  min-height:140px;
  resize:vertical;
}

.emp-count{
  font-size:12px;
  color:#666;
  text-align:right;
  margin-top:8px;
}

/**********************************************************
= = =  PASSWORD / OJITO  = = =
**********************************************************/
.password-wrapper{
  position:relative;
  display:block;
  width:100%;
}

.password-wrapper input{
  padding-right:78px; /* espacio botón */
}

.toggle-password-perfil{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:none;
  color:#777;
  cursor:pointer;
  font-size:13px;
  padding:0 8px;
  margin:0;
  outline:none;
  box-shadow:none;
  -webkit-tap-highlight-color:transparent;

  height:70%;
}

.toggle-password-perfil:hover,
.toggle-password-perfil:focus,
.toggle-password-perfil:active{
  color:#555;
  background:transparent;
}

/* Firefox fix */
.toggle-password-perfil::-moz-focus-inner{ border:0; padding:0; }

/**********************************************************
= = =  BOTONES / ACCIONES  = = =
**********************************************************/
.emp-actions{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:18px;
}

.emp-btn,
.emp-btn-sec,
.emp-btn-danger,
.emp-btn-primary{
  border:0;
  border-radius:8px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:700;
}

.emp-btn,
.emp-btn-sec,
.emp-btn-primary{
  background:var(--emp-primary)!important;
  color:#fff;
  height: 42px !important; 
}

.emp-btn-danger{
  background:var(--emp-accent);
  color:#fff;
}

.emp-btn:hover,
.emp-btn-sec:hover,
.emp-btn-primary:hover,
.emp-btn-danger:hover{
  filter:brightness(0.95);
}

@media (max-width:640px){
  .emp-actions{ flex-direction:column; }
  .emp-actions > *{ width:100%; }
}

/**********************************************************
= = =  LOGO / SUBIR ARCHIVO  = = =
**********************************************************/
.emp-avatar{
  display:block;
  width:96px;
  height:96px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid #eee;
  margin-top:8px;
  background:#fafafa;
}

/* Botón “Subir logo” coherente */
.emp-btn-primary{
  background:var(--emp-primary);
  color:#fff;
}

/**********************************************************
= = =  UTILIDADES  = = =
**********************************************************/
.text-muted{ color:var(--emp-muted); }
.full-width{ width:100%; }
.mt-0{ margin-top:0!important; }
.mb-0{ margin-bottom:0!important; }


/* Placeholder más pequeño solo para #nombre-archivo */
#nombre-archivo::placeholder{ font-size:14px; }
#nombre-archivo::-webkit-input-placeholder{ font-size:14px; } /* Chrome/Safari */
#nombre-archivo::-moz-placeholder{ font-size:14px; }          /* Firefox */
#nombre-archivo:-ms-input-placeholder{ font-size:14px; }      /* IE 10+ */
#nombre-archivo::-ms-input-placeholder{ font-size:14px; }     /* Edge legacy */







/* Botón con misma altura que los inputs */
#emp-cambiar-pass{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:42px;          /* igual que los inputs */
  padding:0 18px;
  border-radius:8px;
  margin:0;
}

/* Microajuste visual si ves 1–2px de desalineación */
#emp-cambiar-pass{ margin-bottom:10px; }

/* En móvil: que se apile y ocupe ancho completo */
@media (max-width:1020px){
  .emp-card .emp-section-grid > :nth-child(3){ width:100%; }
  #emp-cambiar-pass{ width:100%; }
}