/* * ep-framework.css * Reemplazo propio y liviano de Bootstrap 3 (grid, botones, forms, tabs, * navbar, alerts, panels, utilidades). Mismo comportamiento visual que * Bootstrap 3 (breakpoints sm/md/lg, contenedor 12 columnas) para que la * migración de plantillas no cause saltos de layout. * * Este archivo es aditivo: mientras Bootstrap siga cargado en el , * ambos conviven sin conflicto (prefijos de clase idénticos a propósito, * así que basta con dejar de cargar bootstrap.min.css cuando ya nada * dependa de sus estilos específicos que no cubrimos aquí). */ /* ---------- Reset mínimo ---------- */ *, *::before, *::after { box-sizing: border-box; } /* ---------- Foco visible (accesibilidad / navegación por teclado) ---------- */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, [data-toggle]:focus-visible { outline: 2px solid #0e77dd; outline-offset: 2px; } /* ---------- Contenedor y grid ---------- */ .container { width: 100%; margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; } @media (min-width: 768px) { .container { max-width: 750px; } } @media (min-width: 992px) { .container { max-width: 970px; } } @media (min-width: 1200px) { .container { max-width: 1170px; } } .container-fluid { width: 100%; padding-right: 15px; padding-left: 15px; } .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .row.no-gutter { margin-right: 0; margin-left: 0; } .row.no-gutter > [class*="col-"] { padding-right: 0; padding-left: 0; } [class*="col-"] { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } /* Columnas: mobile-first, iguales a Bootstrap 3 (xs = base sin media query) */ @media (min-width: 0) { .col-xs-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-xs-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .col-xs-3 { flex: 0 0 25%; max-width: 25%; } .col-xs-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-xs-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-xs-6 { flex: 0 0 50%; max-width: 50%; } .col-xs-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-xs-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-xs-9 { flex: 0 0 75%; max-width: 75%; } .col-xs-10 { flex: 0 0 83.3333%; max-width: 83.3333%; } .col-xs-11 { flex: 0 0 91.6667%; max-width: 91.6667%; } .col-xs-12 { flex: 0 0 100%; max-width: 100%; } } @media (min-width: 768px) { .col-sm-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-sm-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .col-sm-3 { flex: 0 0 25%; max-width: 25%; } .col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-sm-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .col-sm-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-sm-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-sm-9 { flex: 0 0 75%; max-width: 75%; } .col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; } .col-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; } .col-sm-12 { flex: 0 0 100%; max-width: 100%; } } @media (min-width: 992px) { .col-md-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; } .col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; } .col-md-12 { flex: 0 0 100%; max-width: 100%; } } @media (min-width: 1200px) { .col-lg-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .col-lg-3 { flex: 0 0 25%; max-width: 25%; } .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-lg-9 { flex: 0 0 75%; max-width: 75%; } .col-lg-12 { flex: 0 0 100%; max-width: 100%; } } /* ---------- Utilidades ---------- */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .pull-left { float: left; } .pull-right { float: right; } .clearfix::after { content: ""; display: table; clear: both; } .list-inline { padding-left: 0; list-style: none; } .list-inline > li { display: inline-block; padding: 0 5px; } .list-unstyled { padding-left: 0; list-style: none; } @media (max-width: 767px) { .hidden-xs { display: none !important; } } @media (min-width: 768px) { .visible-xs { display: none !important; } } /* ---------- Botones ---------- */ .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; text-decoration: none; line-height: 1.42857; } .btn:hover, .btn:focus { text-decoration: none; } .btn-default { color: #333; background-color: #fff; border-color: #ccc; } .btn-default:hover { background-color: #e6e6e6; } .btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; } .btn-success:hover { background-color: #449d44; } .btn-danger { color: #fff; background-color: #d9534f; border-color: #d43f3a; } .btn-danger:hover { background-color: #c9302c; } .btn-warning { color: #fff; background-color: #f0ad4e; border-color: #eea236; } .btn-warning:hover { background-color: #ec971f; } .btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 3px; } .btn-xs { padding: 1px 5px; font-size: 12px; border-radius: 3px; } /* ---------- Embed responsivo (video del reproductor de canción) ---------- */ .embed-responsive { position: relative; display: block; height: 0; padding: 0; overflow: hidden; } .embed-responsive-4by3 { padding-bottom: 75%; } .embed-responsive-16by9 { padding-bottom: 56.25%; } .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } /* ---------- Paginación ---------- */ .pagination { display: flex; flex-wrap: wrap; padding-left: 0; list-style: none; border-radius: 4px; } .pagination > li { margin: 0 2px; } .pagination > li > a, .pagination > li > span { position: relative; display: block; padding: 6px 12px; color: #337ab7; text-decoration: none; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; } .pagination > li > a:hover { background-color: #eee; } .pagination > li.active > a, .pagination > li.active > span { color: #fff; background-color: #337ab7; border-color: #337ab7; } .pagination > li.disabled > a, .pagination > li.disabled > span { color: #999; pointer-events: none; background-color: #fff; } /* ---------- Forms ---------- */ .form-group { margin-bottom: 15px; } .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; color: #555; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; } .input-group { position: relative; display: flex; width: 100%; } .input-group .form-control { flex: 1 1 auto; width: 1%; } .input-group-addon, .input-group-btn { display: flex; align-items: center; padding: 6px 12px; white-space: nowrap; background-color: #eee; border: 1px solid #ccc; } .input-group-addon:first-child { border-right: 0; border-radius: 4px 0 0 4px; } .input-group-btn { padding: 0; background: none; border: 0; } /* ---------- Alerts ---------- */ .alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; } .alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; } /* ---------- Panels / well ---------- */ .panel { margin-bottom: 20px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid #ddd; } .panel-body { padding: 15px; } .well { padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; } /* ---------- Breadcrumb ---------- */ .breadcrumb { padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #f5f5f5; border-radius: 4px; } /* ---------- Tabs ---------- */ .nav-tabs { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; border-bottom: 1px solid #ddd; } .nav-tabs > li { margin-bottom: -1px; } .nav-tabs > li > a { display: block; padding: 10px 15px; margin-right: 2px; color: #337ab7; text-decoration: none; border: 1px solid transparent; border-radius: 4px 4px 0 0; } .nav-tabs > li.active > a { color: #555; background-color: #fff; border-color: #ddd #ddd transparent; } .tab-content > .tab-pane { display: none; } .tab-content > .tab-pane.active { display: block; } /* ---------- Navbar ---------- */ .navbar { position: relative; min-height: 50px; margin-bottom: 20px; } .navbar-header { display: flex; align-items: center; justify-content: space-between; } .navbar-brand { padding: 15px; font-size: 18px; } .navbar-nav { display: flex; flex-wrap: wrap; list-style: none; padding-left: 0; margin: 0; } .navbar-nav > li > a { display: block; padding: 15px; text-decoration: none; } .navbar-right { margin-left: auto; } .navbar-toggle { display: none; padding: 9px 10px; background-color: transparent; border: 1px solid transparent; border-radius: 4px; } .navbar-collapse { display: flex; } @media (max-width: 767px) { .navbar-header { flex-wrap: wrap; } .navbar-toggle { display: block; } .navbar-collapse { display: none; flex-direction: column; width: 100%; } .navbar-collapse.in { display: flex; } .navbar-nav { flex-direction: column; } } /* ---------- Dropdown (submenús del navbar) ---------- */ .dropdown { position: relative; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; min-width: 160px; padding: 5px 0; margin: 2px 0 0; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 6px 12px rgba(0,0,0,.175); list-style: none; } .dropdown-menu > li > a { display: block; padding: 3px 20px; clear: both; white-space: nowrap; color: #333; text-decoration: none; } .dropdown-menu > li > a:hover { background-color: #f5f5f5; } .dropdown.open > .dropdown-menu { display: block; } /* ---------- Íconos (reemplazo de glyphicon, sin fuente de íconos externa) ---------- * Mismas clases que Bootstrap (glyphicon glyphicon-nombre) para no tener que * tocar el HTML de las 22 plantillas que ya las usan. Cada ícono es un SVG * propio embebido como mask, así hereda el color del texto (currentColor) * igual que hacía la fuente de íconos de Bootstrap. */ .glyphicon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .glyphicon-headphones{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a7 7 0 0 0-7 7v5a2 2 0 0 0 2 2h1v-7H6v-0a6 6 0 0 1 12 0v0h-2v7h1a2 2 0 0 0 2-2v-5a7 7 0 0 0-7-7z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a7 7 0 0 0-7 7v5a2 2 0 0 0 2 2h1v-7H6v-0a6 6 0 0 1 12 0v0h-2v7h1a2 2 0 0 0 2-2v-5a7 7 0 0 0-7-7z'/%3E%3C/svg%3E");} .glyphicon-ok{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");} .glyphicon-wrench{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 19.6 15 12.6a5 5 0 0 0-6-6L12 9.7 9.7 12 6.6 8.9a5 5 0 0 0 6 6l7 7z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 19.6 15 12.6a5 5 0 0 0-6-6L12 9.7 9.7 12 6.6 8.9a5 5 0 0 0 6 6l7 7z'/%3E%3C/svg%3E");} .glyphicon-share{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.1a3 3 0 0 0-2 .8l-7-4v-.1c0-.3 0-.5-.1-.8l6.9-4a3 3 0 1 0-.9-1.9l-6.9 4a3 3 0 1 0 0 3.8l7 4.1v.1a3 3 0 1 0 3-1.9z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.1a3 3 0 0 0-2 .8l-7-4v-.1c0-.3 0-.5-.1-.8l6.9-4a3 3 0 1 0-.9-1.9l-6.9 4a3 3 0 1 0 0 3.8l7 4.1v.1a3 3 0 1 0 3-1.9z'/%3E%3C/svg%3E");} .glyphicon-comment{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v12H7l-3 3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v12H7l-3 3z'/%3E%3C/svg%3E");} .glyphicon-search{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4a6 6 0 1 0 3.8 10.6l5.3 5.3 1.4-1.4-5.3-5.3A6 6 0 0 0 10 4zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4a6 6 0 1 0 3.8 10.6l5.3 5.3 1.4-1.4-5.3-5.3A6 6 0 0 0 10 4zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8z'/%3E%3C/svg%3E");} .glyphicon-chevron-down{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6z'/%3E%3C/svg%3E");} .glyphicon-chevron-right{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6z'/%3E%3C/svg%3E");} .glyphicon-music{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10.6a3.5 3.5 0 1 0 2 3.15V7h4V3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10.6a3.5 3.5 0 1 0 2 3.15V7h4V3z'/%3E%3C/svg%3E");} .glyphicon-map-marker{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");} .glyphicon-link{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.6 13.4a1 1 0 0 1 0-1.4l3-3a1 1 0 1 1 1.4 1.4l-3 3a1 1 0 0 1-1.4 0zM8.5 15.5l-1.6 1.6a2.5 2.5 0 0 1-3.5-3.5l3-3a2.5 2.5 0 0 1 3.5 0l-1.4 1.4a.5.5 0 0 0-.7 0l-3 3a.5.5 0 0 0 .7.7l1.6-1.6zm7-7 1.6-1.6a2.5 2.5 0 0 1 3.5 3.5l-3 3a2.5 2.5 0 0 1-3.5 0l1.4-1.4a.5.5 0 0 0 .7 0l3-3a.5.5 0 0 0-.7-.7l-1.6 1.6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.6 13.4a1 1 0 0 1 0-1.4l3-3a1 1 0 1 1 1.4 1.4l-3 3a1 1 0 0 1-1.4 0zM8.5 15.5l-1.6 1.6a2.5 2.5 0 0 1-3.5-3.5l3-3a2.5 2.5 0 0 1 3.5 0l-1.4 1.4a.5.5 0 0 0-.7 0l-3 3a.5.5 0 0 0 .7.7l1.6-1.6zm7-7 1.6-1.6a2.5 2.5 0 0 1 3.5 3.5l-3 3a2.5 2.5 0 0 1-3.5 0l1.4-1.4a.5.5 0 0 0 .7 0l3-3a.5.5 0 0 0-.7-.7l-1.6 1.6z'/%3E%3C/svg%3E");} .glyphicon-fire{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2s-5 5.5-5 10a5 5 0 0 0 10 0c0-1-.4-1.8-1-2.5.1 1-.3 2-1.2 2.5.5-2-1-3-1-5.5-1 1.5-2.8 2.5-2.8 4.5 0 .8.3 1.3.7 1.8-1.1-.3-1.7-1.5-1.7-2.8 0-3 2-6 2-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2s-5 5.5-5 10a5 5 0 0 0 10 0c0-1-.4-1.8-1-2.5.1 1-.3 2-1.2 2.5.5-2-1-3-1-5.5-1 1.5-2.8 2.5-2.8 4.5 0 .8.3 1.3.7 1.8-1.1-.3-1.7-1.5-1.7-2.8 0-3 2-6 2-8z'/%3E%3C/svg%3E");} .glyphicon-file{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v15H6zm9 1.5V8h4.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v15H6zm9 1.5V8h4.5z'/%3E%3C/svg%3E");}