@tailwind base;
@tailwind components;
@tailwind utilities;

/* --- Personalización Koretic --- */

/* Header y Logo */
.site-header {
  background: white;
  padding: 0.75rem 0;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid #f3f4f6;
  backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.logo-container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-logo {
  height: 3rem;
  width: auto;
}

@media (min-width: 768px) {
  .site-logo {
    height: 3.5rem;
  }
}

/* Navegación */
.nav-link {
  color: #4b5563;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-link:hover {
  color: rgb(236, 172, 0);
}

/* --- Personalización Koretic --- */

/* Header y Logo */
.site-header {
  @apply bg-white shadow-sm py-4 sticky top-0 z-50 backdrop-blur-sm bg-white/95 border-b border-gray-100;
}

.logo-container {
  @apply container mx-auto px-4 flex justify-between items-center;
}

.site-logo {
  @apply w-auto h-12 md:h-14;
}

/* Botón corporativo principal */
.btn-koretic {
  @apply bg-orange-500 text-white px-8 py-3 rounded-full font-bold shadow hover:bg-orange-600 transition-all duration-200;
}

/* Sombra elegante para tarjetas */
.card-koretic {
  @apply rounded-xl shadow-md hover:shadow-xl transition;
}

/* Títulos destacados */
.title-koretic {
  @apply text-4xl font-bold text-orange-500 mb-4;
}

/* Formulario estilizado */
.form-koretic input,
.form-koretic textarea {
  @apply w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-orange-400;
}

/* Animación de entrada suave */
.fade-in {
  animation: fadeIn 1s ease-in;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Separador decorativo */
.divider-koretic {
  @apply w-24 h-1 bg-orange-400 rounded mx-auto my-8;
}

:root {
  --koretic-primary: #ECAC00;
  --koretic-primary-light: #FFD151;
  --koretic-primary-dark: #D99B00;
}

.text-koretic {
  color: var(--koretic-primary);
}

.bg-koretic {
  background-color: var(--koretic-primary);
}

.from-koretic {
  --tw-gradient-from: var(--koretic-primary);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(236 172 0 / 0));
}

.to-koretic {
  --tw-gradient-to: var(--koretic-primary);
}

.hover\:from-koretic-dark:hover {
  --tw-gradient-from: var(--koretic-primary-dark);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(217 155 0 / 0));
}

.hover\:to-koretic-dark:hover {
  --tw-gradient-to: var(--koretic-primary-dark);
}

.btn-koretic {
  @apply bg-gradient-to-r from-koretic to-koretic-primary-dark text-white px-8 py-3 rounded-full font-bold shadow hover:from-koretic-dark hover:to-koretic-primary-dark transition-all duration-200;
}

/* === ESTILOS FORMULARIO EMPRESARIAL === */

/* Ocultar elementos innecesarios del formulario */
form[name="contact-form"] header,
form[name="contact-form"] nav,
form[name="contact-form"] main > h1,
form[name="contact-form"] main > p,
form[name="contact-form"] footer {
  display: none !important;
}

/* Contenedor del formulario */
form[name="contact-form"] {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Campos de formulario */
.form-field {
  margin-bottom: 1.5rem;
}

/* Labels del formulario - estilo empresarial */
.form-label label {
  display: block;
  color: #d1d5db;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Asterisco obligatorio */
.form-label .required {
  color: #f59e0b;
  margin-left: 0.25rem;
}

/* Campos de entrada - diseño empresarial premium */
.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 1rem;
  background-color: rgba(17, 24, 39, 0.5);
  border: 2px solid #374151;
  border-radius: 0.5rem;
  color: #ffffff;
  font-size: 1rem;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

/* Placeholder styling */
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #9ca3af;
  font-style: italic;
}

/* Select dropdown */
.form-field select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23d1d5db' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 1rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem;
  padding-right: 3rem;
  cursor: pointer;
}

/* Estados hover */
.form-field input[type="text"]:hover,
.form-field input[type="email"]:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: #6b7280;
  background-color: rgba(17, 24, 39, 0.7);
}

/* Estados focus - profesional */
.form-field input[type="text"]:focus,
.form-field input[type="email"]:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: #f59e0b;
  background-color: rgba(17, 24, 39, 0.8);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

/* Textarea específico */
.form-field textarea {
  min-height: 120px;
  resize: vertical;
}

/* Botón de envío - diseño empresarial premium */
.buttons button[type="submit"],
.buttons .button {
  width: 100%;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

/* Hover del botón */
.buttons button[type="submit"]:hover,
.buttons .button:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

/* Active del botón */
.buttons button[type="submit"]:active,
.buttons .button:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.3);
}

/* Honeypot - mantener oculto */
.form-honeybear {
  display: none !important;
}

/* Contenedor de botones */
.buttons {
  margin-top: 2rem;
}

/* Efectos adicionales para campos requeridos */
.form-field input[required]:invalid {
  border-color: #ef4444;
}

.form-field input[required]:valid {
  border-color: #10b981;
}

/* Animación sutil para los campos */
.form-field input,
.form-field textarea,
.form-field select {
  animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Contenido centrado para páginas normales */
body .page-centered-content {
  max-width: 700px !important;
  margin: 2rem auto !important;
  padding: 1.5rem !important;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 2px 16px rgba(0,0,0,0.04);
  text-align: center;
  width: auto !important;
  display: block !important;
}

body .page-centered-content p {
  text-align: left;
  margin-bottom: 1em;
}

body.paginas .page-centered-content {
  max-width: 700px !important;
  margin: 2rem auto !important;
  padding: 1.5rem !important;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 2px 16px rgba(0,0,0,0.04);
  text-align: center;
  width: auto !important;
  display: block !important;
}

body.paginas .page-centered-content p {
  text-align: left;
  margin-bottom: 1em;
}

body.paginas .page-centered-content ul,
body.paginas .page-centered-content ol {
  text-align: left !important;
  margin-left: 2em !important;
  padding-left: 0 !important;
  list-style-type: disc !important;
  list-style-position: inside !important;
}

body.paginas .page-centered-content li {
  text-align: left !important;
  list-style-type: disc !important;
  margin-bottom: 0.5em !important;
  display: list-item !important;
}