/* ======= TUS LÍNEAS ORIGINALES (sin cambios) ======= */
body{
    margin: 7%;
    background-color: #fc7d1c;
} 



.container{
    width: 45%;
    background-color: white;
    border: 1px solid rgb(235, 235, 235);
    border-radius: 8px;
    margin: 0;
    padding: 0;
    box-shadow: 0 3px 5px 0 rgba(240, 240, 240, 0.3);
    animation: transitionIn-Y-over 0.5s;

}
td{
    text-align: center;

}
.header-text{
    font-weight: 600;
    font-size: 30px;
    letter-spacing: 1px;
    margin-bottom: 10px;

}

.sub-text{
    font-size: 15px;
    color: rgb(138, 138, 138);
}

.form-label{
    color: rgb(44, 44, 44);
    text-align: left;
    font-size: 14px;
}
.label-td{
    text-align: left;
    padding-top: 10px;
}

.hover-link1{
    font-weight: bold;
}


.hover-link1:hover{
    opacity: 0.8;
    transition: 0.5s;


}.login-btn{
    /*margin-top: 15px;*/
    margin-bottom: 15px;
    width: 100%;
}
/* ======= FIN TUS LÍNEAS ORIGINALES ======= */



/* =================================================================
   MEJORAS PRO + RESPONSIVE para LOGIN (añadido sin romper tu base)
   ================================================================= */

/* 1) Centrado vertical real y límites de ancho en pantallas grandes */
html, body{ 
  height: 100%;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  background: linear-gradient(135deg, #fc7d1c 0%, #ff9550 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2) Contenedor: que no se corte en móviles y se vea pro en desktop */
.container{
  max-width: 520px;             /* mejora legibilidad en monitores */
  width: 45%;
}

/* 3) Espaciado interno más cómodo para formularios */
.container table{
  width: 100%;
  border-collapse: collapse;
}
.container td{
  padding: 10px 16px;
}

/* 4) Inputs, selects, etc. (si existen en tu markup) */
.container input[type="text"],
.container input[type="email"],
.container input[type="password"],
.container select{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.container input:focus,
.container select:focus{
  border-color: #1984bc;
  box-shadow: 0 0 0 3px rgba(25,132,188,.15);
}

/* 5) Botón principal (respetando tu .login-btn width:100%) */
.login-btn{
  padding: 12px 14px;
  border-radius: 6px;
  border: none;
  background: #1984bc;
  color: #fff;
  font-weight: 600;
  letter-spacing: .3px;
  transition: background .2s ease, transform .06s ease;
}
.login-btn:hover{ background:#156d99; }
.login-btn:active{ transform: translateY(1px); }

/* 6) Cabeceras y texto secundario */
.header-text{
  line-height: 1.25;
  text-align: center;
}
.sub-text{
  text-align: center;
}

/* 7) Accesibilidad y reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .container{ animation: none !important; }
  *{ scroll-behavior: auto; }
}

/* 8) Modo oscuro opcional del sistema */
@media (prefers-color-scheme: dark){
  body{
    background: linear-gradient(135deg, #1b1f24 0%, #232a31 100%);
  }
  .container{
    background-color: #0f1419;
    border-color: #222a33;
    box-shadow: 0 6px 24px rgba(0,0,0,.35);
    color: #e7eef6;
  }
  .form-label{ color:#c9d4df; }
  .sub-text{ color:#a7b3c0; }
  .container input[type="text"],
  .container input[type="email"],
  .container input[type="password"],
  .container select{
    background:#0b0f14;
    color:#dfe7ee;
    border-color:#26303a;
  }
}

/* 9) BREAKPOINTS — sin tocar tu base, solo adaptando */

/* Laptops pequeñas / tablets apaisadas */
@media (max-width: 1024px){
  body{ margin: 4%; }
  .container{
    width: 56%;
    max-width: 560px;
  }
}

/* Tablets y móviles grandes */
@media (max-width: 768px){
  body{ margin: 0; padding: 16px; }
  .container{
    width: 92%;
    max-width: 520px;
    border-radius: 10px;
  }
  .header-text{ font-size: 28px; }
  .sub-text{ font-size: 14px; }
}

/* Móviles medianos */
@media (max-width: 480px){
  .container{
    width: 94%;
    padding: 0;            /* seguimos usando padding en las celdas */
    border-radius: 10px;
  }
  .container td{
    padding: 10px 14px;
  }
  .header-text{
    font-size: 26px;
    letter-spacing: .2px;
  }
  .sub-text{ font-size: 13px; }
}

/* Móviles pequeños (≤360px) */
@media (max-width: 360px){
  .container{ width: 96%; }
  .header-text{ font-size: 24px; }
}

/* 10) Safe areas (iOS / Android con notch) */ 
@supports (padding: max(0px)){
  body{
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-top: max(0px, env(safe-area-inset-top));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* 11) Estados de error / éxito (por si los usas en el login) */
.form-error{
  color:#b42318;
  background:#fee4e2;
  border:1px solid #fecdca;
  border-radius:6px;
  padding:8px 12px;
  font-size: 13px;
}
.form-success{
  color:#05603a;
  background:#d1fadf;
  border:1px solid #a6f4c5;
  border-radius:6px;
  padding:8px 12px;
  font-size: 13px;
}

/* ==== Fixes generales seguros (no rompen tu CSS) ==== */
html, body { overflow-x: hidden; max-width: 100%; }
img, input, select, textarea, button { max-width: 100%; }
table { width: 100%; border-collapse: collapse; }

/* Mantén el card centrado también en escritorio grande */
.container {
  max-width: 640px;         /* evita que se estire demasiado en monitores anchos */
  margin-left: auto; 
  margin-right: auto;
  overflow: hidden;         /* oculta cualquier desbordamiento visual */
}

/* ====== Móvil pequeño (≤ 480px) ====== */
@media (max-width: 480px){
  body{
    margin: 0;                      /* quita el margen que “corta” el card */
    background-attachment: scroll;  /* previene saltos raros en iOS */
  }

  .container{
    width: 92%;
    margin: 16px auto;              /* centra el card */
    border-radius: 10px;
    padding: 12px 10px;             /* un poco de respiro interno */
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
  }

  td{ 
    display: block;                 /* cada fila ocupa todo el ancho */
    text-align: left;
    width: 100%;
  }

  .header-text{
    font-size: 22px;
    letter-spacing: .2px;
    margin: 8px 0 6px;
    text-align: center;
  }

  .sub-text{
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 10px;
    text-align: center;
  }

  .form-label{
    font-size: 13px;
    margin-bottom: 4px;
    display: block;
  }

  .label-td{ padding-top: 6px; }

  /* inputs full-width sin recortes */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  select,
  textarea{
    width: 100% !important;
    box-sizing: border-box;
    padding: 10px 12px;
  }

  .login-btn{
    width: 100%;
    padding: 12px;
    font-size: 16px;
    margin: 14px 0 4px;
    display: inline-block;
  }
}

/* ====== Teléfonos grandes / Tablets vertical (481–768px) ====== */
@media (min-width: 481px) and (max-width: 768px){
  body{ margin: 2%; }

  .container{
    width: 94%;
    max-width: 520px;
    margin: 20px auto;
    padding: 16px 14px;
  }

  .header-text{ font-size: 26px; text-align: center; }
  .sub-text{ font-size: 14px; text-align: center; }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  select,
  textarea{
    width: 100% !important;
  }

  .login-btn{ width: 100%; padding: 12px; font-size: 16px; }
}

/* ====== Laptops/Escritorio (≥ 1024px) – pulido suave ====== */
@media (min-width: 1024px){
  .container{
    width: 45%;            /* respetamos tu valor original */
    max-width: 640px;      /* y evitamos que se pase */
    margin-top: 40px;
  }
  .header-text{ font-size: 30px; }
}

/* === BLOQUE ANTI-CORTE SOLO MÓVIL === */
@media (max-width: 480px){

  /* evita scroll lateral y márgenes que recortan */
  html, body{overflow-x:hidden; max-width:100%; margin:0;}

  /* el card siempre centrado y respirando */
  .container{
    width:94%;
    max-width:520px;
    margin:16px auto;
    padding:16px 12px;
    border-radius:12px;
    overflow:hidden;               /* si algo se desborda, lo oculta */
  }

  /* las tablas de formulario no rompen el ancho */
  table{width:100%; table-layout:fixed; border-collapse:collapse;}
  td{
    display:block;                 /* cada celda ocupa todo el ancho */ 
    width:100% !important;
    padding:6px 0 !important;
    box-sizing:border-box;
  }

  /* inputs y selects 100% SIEMPRE */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  select, textarea{
    width:100% !important;
    max-width:100%;
    box-sizing:border-box;
    display:block;
  }

  /* botones 100% y sin texto recortado */
  .login-btn,
  .btn{
    width:100% !important;
    max-width:100%;
    display:block;
    padding:12px 14px;
    white-space:normal;            /* permite salto de línea si hace falta */
  }

  /* tipografía algo más compacta para cabeceras */
  .header-text{font-size:22px; text-align:center; margin:8px 0 6px;}
  .sub-text{font-size:13px; text-align:center; line-height:1.45;}
}

/* === Correcciones Responsive Login & Signup === */

/* Contenedor principal: ocupar todo en móvil */
.container {
  width: 100%;
  max-width: 420px;   /* en PC no pasa de 420px */
  margin: 5% auto;    /* centrado */
  padding: 20px;
  box-sizing: border-box;
}

/* Las tablas dentro de login/signup deben adaptarse */
.container table {
  width: 100% !important;
  max-width: 100%;
  border-spacing: 0;
}

/* Inputs y botones full width */
.input-text, 
.login-btn, 
.btn {
  width: 100% !important;
  box-sizing: border-box;
}

/* Texto centrado y ajustado */
.header-text {
  font-size: 24px;
  text-align: center;
}
.sub-text {
  font-size: 14px;
  text-align: center;
}

/* Responsive especial para pantallas pequeñas */
@media (max-width: 768px) {
  .container {
    margin: 10% auto;
    padding: 15px;
    max-width: 90%;
  }

  .header-text {
    font-size: 20px;
  }
  .sub-text {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .container {
    width: 95% !important;
    margin: 0 auto !important;
    padding: 16px !important;
  }
  table {
    width: 100% !important;
  }
  .input-text {
    width: 100% !important;
    font-size: 16px;
  }
  .login-btn {
    width: 100% !important;
    font-size: 16px;
    height: 48px;
  }
}